juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
50.45k stars 3.69k forks source link

Animating children after parents #712

Open ortonomy opened 4 years ago

ortonomy commented 4 years ago

Is your feature request related to a problem? Please describe. I'm trying to stagger the animation of children. Such as :

  1. parent animates
  2. child automatically animates

Using anime.js I tried:

Anime.timeline({
... 
}).add({
  // select parent after
}.add({
 // select and animate child after
})

The parent animation works, but the child is already 'complete' by the time the parent finishes.

Describe the solution you'd like In Pose (react, vue), I can do it easily with a declarative API: afterchildren, beforechildren to guarantee parent is complete. I can't do that with anime.js

Describe alternatives you've considered POSE for Vue has sadly been deprecated and Frame Motion is react only

Additional context The POSE example I'm trying to achieve is here:

https://popmotion.io/blog/20180904-introducing-pose-for-vue/#introducing-pose-for-vue-enter/exit-transitions

Because POSE has been deprecated, I'm trying to find a replacement. Anime.js looks powerful enough, but I'm trying to find an archetype for the parent child animation staggering and I can't see an easy way to do it in Anime.