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

Composable animations#75

Merged
itsdouges merged 2 commits intomasterfrom
composable-animations
Oct 6, 2018
Merged

Composable animations#75
itsdouges merged 2 commits intomasterfrom
composable-animations

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 force-pushed the composable-animations branch from 30abcc0 to f6a440e Compare October 6, 2018 06:26
@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