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>
)
}