Skip to content
This repository has been archived by the owner on Apr 14, 2020. It is now read-only.

Composable animations #75

Merged
merged 2 commits into from
Oct 6, 2018
Merged

Composable animations #75

merged 2 commits into from
Oct 6, 2018

Conversation

itsdouges
Copy link
Owner

@itsdouges itsdouges commented Sep 26, 2018

Introduces new composable animations API, still WIP! Closes #74.

Internally when setting styles you'll instead have a callback function instead of returning styles straight

animate: AnimationCallback = (data, onFinish, setTargetProps) => {
  setTargetProps({
-   style: { display: 'none' },
+   style: (prevStyles) => ({ ...prevStyles, display: 'none' }),
  });
};

As a side, also thinking about removing className from animations internally and pumping style through emotion. That would end up making styles be fully CSS instead of inline styles. Will do in another PR though as it would be a breaking change for some consumers.

TODO:

  • Get default props working through a HOC
  • Squash commits
  • Update readme with new animations
  • Regen storybook/docs
  • Add more stories for reveal/conceal move
  • Solve vertically/horizontally centring children inside reveal move (still needs work, will make another issue)

Refactors internals to enable a composable api for animations,
this also introduces two new animations "Reveal" and "FadeMove",
which are both used in "RevealMove" and "CrossFadeMove".
@itsdouges itsdouges merged commit 97ddeb9 into master Oct 6, 2018
@itsdouges itsdouges deleted the composable-animations branch October 6, 2018 06:31
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant