CODEWITHSUNDEEP
react-motion
nkint
nkint

Reputation: 11733

React Motion: simple chaining

I'm using react, mobx and I need to animate things.

I want to do a simple animation chaining: when the first animation ends, the second starts.

As use case think of a section templates: every time the user change the section, the current section fade out and then the next section fade in.

Any hints?

Upvotes: 0

Views: 199

Answers (1)

Ruslan Elisha
Ruslan Elisha

Reputation: 131

Regardless react-motion or any other library, you can always use onAnimationEnd animation event listener .

With this method you are able to detect when css animation ends on related html element and execute method function. Then you can choose what to do , for example using setState():

animation1 = () => {
   this.setState({
      animation1: true
   })
 }
animation2 = () => {
   this.setState({
      animation2: true
   })
 }

animation3 = () => {
   this.setState({
      animation3: true
   })
 }

render() {
   return (
     <div>
       <div onAnimationEnd={this.animation1}>
         First animation
       </div>
       <div onAnimationEnd={this.animation2}>
         Second animation
      </div>
      <div onAnimationEnd={this.animation3}>
         Third animation
      </div>
     </div>
    )
  }

Upvotes: 0

Related Questions