What about Timeline animation?

[plus1tv]

What about Timeline animation?

[tujoworker]

Actually, we can use a trick here!

<Anime
    autoplay={false}
    ref={ref => {
        console.log('ref', ref);
        setTimeout(() => {
            ref.anime.play();
        }, 2e3);
        this._ref = ref;// this way we can control the animation also from outside of jsx!
    }}
    ...
>
...
</Anime>

[alaingalvan]

Controlling multiple components in different components would require the 2 components to share state in some way. Let me try cooking up an example here:

Lets say for instance, we have a view with Header and Body components.

We want it so that if we click a button, a unique animation will play one each of these components, 1 by 1.

import { Component } from 'react';

 class View extends Component {

  triggerAnimation = () => {
    // Stub
  }

 render() {
    return (
      <div>
        <Header/>
        <Body/>
        <Button onClick={this.tiggerAnimation}/>
      </div>
    );
  }
}

Workaround - Delay

One way to go about doing this is to set the delay of each element to be whatever the duration would be in timeline, for instance, I do that in the intro animation of the React Anime Github Page.

The whole point of a Timeline is to centralize those keyframes in one place though...

Future Work

Perhaps some future work should be defining a <Timeline/> element:

let Logo = () => (
  <Timeline>
    <Keyframe>
      <LogoOutline/>
    </Keyframe>
   <Keyframe>
      <LogoLines/>
    <Keyframe>
  </Timeline>
);

Sounds like a good feature for 2.1!

[maximusnikulin]

Oh thanks a lot, I am looking forward Timeline component. I'll use workaround solution. Thanks for the help.

[dperolio]

Was this functionality ever added? :c