Compose likes its 2020 | New composable motion API

Composable animations (#75) have now been released, which means animations can now compose styles from other animations that executed before.

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

This also introduces two new animations, Reveal, and FadeMove. Both of these animations do one thing, and do it well. They are utilised in both RevealMove and CrossFadeMove.

Reveal

Docs | Props

Reveals the destination element container from the Target component.
A limitation at the moment is the destination element must have an animation defined,
if you don't want one to happen use the Noop animation.
Requires the use of the Target component to specify the focal element.

// origin-element.js
import Baba, { Reveal, Target } from 'yubaba';

<Baba name="reveal">
  <Reveal>{baba => <div {...baba} />}</Reveal>
</Baba>;

// destination-element.js
import Baba, { Target, Noop } from 'yubaba';

<Baba name="reveal">
  <Noop>
    {baba => (
      <div {...baba}>
        <Target>{target => <div {...target} />}</Target>
      </div>
    )}
  </Noop>
</Baba>;

FadeMove

Docs | Props

Will position: absolute move the origin element to the destination element while fading out.

// origin-element.js
import Baba, { FadeMove } from 'yubaba';

<Baba name="fade-move">
  <FadeMove>{baba => <div {...baba} />}</FadeMove>
</Baba>;

// destination-element.js
import Baba from 'yubaba';

<Baba name="fade-move">{baba => <div {...baba} />}</Baba>;