About two weeks ago, a question came up: how to loop an Angular animation in Ionic. I built a quick demo then, and I’ve converted it into an npm library so it can be plugged in and used. Warning: it’s a bit clunky, because Angular animations are a bit clunky. But probably it’s mostly copypaste for an “end user.” The hardest part of the whole project was writing up the API. (Not a joke, that was annoying af.)
Input: an Angular keyframe animation
Output: a loopable version, where you can pause, resume, change the number of iterations, and count down in real time.
Github link
npm link
1 Like
You can add this to Google Angular github page.
I think Google team is not interested in doing this by themselves. I had to waste several days because of this problem. Eventually I’m using CSS3 animation loop but Angular has DOM problem. If a component which contains animation is not visible, animation automatically turns off. There’s no way to keep the animation running in background. So I have to put all animation contents in main HTML file to keep them alive regardless of their visibility… and then there’s no point in creating components to make dynamic single page application.
Angular should give an option to either destroy components in DOM or not…
Nice for share!
Just wondering, if a gif animation could be useful to understand what it does before install it.
I’m looking for an animation to do an explosion of an item in a list item after a click on it.
Have you some idea how can I do it?!
Thanks!