Dynamic iteration of Angular animations

The question arose in this thread how to dynamically iterate Angular animations. I built a simple demo and uploaded it to Github. Hopefully someone finds it useful.


Great stuff. I will try this shortly.

A quick question:

I found when animation is happening inside a component that is nested in a parent html file, it loses animation when I navigate to other parts of parent html. Everything sets back to its default position…
How can I keep the animation going while the component is hidden or in background? I wonder if that’s possible with CSS3 animation.

Check Anime.js

This one solves problem much better… and it makes me never want to use Angular animation again.
I will save CSS3 animation for its 3D animation functionality… and light weight animation.

animation like this would likely be impossible on Java & XML environment unless you use a different software to program.
This is one of benefits of doing progressive web app development. You can use amazing javascript libraries.