Chained Animation
See original GitHub issueThis can be an awesome feature for banner ad animation. I tried to do this:
anime({
targets: '#test-1',
translateX: 100,
scale: [.5, 1],
rotate: 180,
delay: 1000,
opacity: [0, 1],
duration: 2000,
easing: 'easeOutExpo',
});
anime({
targets: '#test-1',
translateX: 200,
scale: [1, 2],
rotate: 360,
delay: 5000,
opacity: 0,
duration: 1000,
easing: 'easeOutExpo',
});
But the first call was ignored. It’s possible to do an equivalent behavior? Basicly these steps:
- Anime in
- Wait X seconds
- Anime out (with different parameters)
Thanks,
Jean
Issue Analytics
- State:
- Created 7 years ago
- Comments:10 (5 by maintainers)
Top Results From Across the Web
Examples - Chained Animation - Phaser
Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.
Read more >Chaining CSS Animations using Javascript. | by Nishant Gupta
Why not chain animations using CSS animation-delays ? Let's assume we have animation 1: slideIn which is followed by animation 2 zoom ....
Read more >Chained Animation: Collaborative Forms of ... - SAGE Journals
This article discusses experimental forms of collaborative filmmaking in education and introduces the pedagogical concept of Chained Animation.
Read more >How to animate a chain in Blender - YouTube
In this short tutorial I wanted to quickly show you guys how to animate a chain in Blender. Anybody with an entry level...
Read more >CSS Animation Tutorial #10 - Chaining Animations - YouTube
Hey gang, in this CSS animation tutorial I'll show you how we can chain 2 or more animations together on one element.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Really excited about this library.
If you call .finished, it will return a promise. Then you can use async/await:
You can use the
complete
callback to chain animations like so: