Self targeted animations usage sucks

[itsdouges]

If you want to have an animation animate over itself (basically a Baba's target being itself) you are left with changing the key prop on the component.

This isn't great for performance.

There is the in prop we could use - but again that was made for the use case of one persistent element animating to another (different!) element.

react-flip-toolkit uses a flipKey prop to trigger animations. Any time it changes all child animations are triggered. We could do something similar (we're essentially doing that with key right now) - but maybe there's a better API we can find.

[itsdouges]

Ok so here's a thought:

Deprecate default export Baba. Introduce a component for each type of animation trigger.

<AnimateThroughLifecycle name="anim" />

^ will animate through the unmount -> mount behaviour.

<AnimateSelf tiggerKey={shown} id="anim" />

^ will animate to itself when triggerKey changes

<AnimateThroughIn in={shown} name="anim" />

^ will animate when mounted or in flips from false to true. this one is useful for when the component is never removed from the react tree.

[itsdouges]

more thoughts on this: splitting up the logic into three components probably isn't worth it. i think some smart dev errors, explanation in docs, and renaming from Baba to Animate or smtg prob worth more.

// persisted to mounted
({ isShown }) => [
  <Animator in={!isShown} name="anim" />,
  isShown && <Animator name="anim" />,
]

// unmounted to mounted
({ isShown }) => [
  !isShown && <Animator name="anim" />,
  isShown && <Animator name="anim" />,
]

// self targeted
({ selectedId }) => 
  <Animator triggerOnSelfKey={selectedId} name="anim" />

---

we need to rename baba component as well. the component is all about taking snapshots of the DOM, orchestrating, and executing the animations. its the brains.

Animate // meh
Animator // i like this but
Animation // semantically not accurate