How to use TIMELINE in SVG motionPath animation?
See original GitHub issueFriends, this is a great js animation script. Thank you! But there is a simple task that could not be solved. There is an svg path, and an element moves along it. How to force the element to stop in the middle of the path for 3 seconds, and then continue the movement? Did not find in the examples how in motionPath to add timeline + add parameters?
It turned out only to animate until the middle of the path like this
var path = anime.path ('path', 50);
Here is an example: https://codepen.io/Cheizer/pen/ERZNjM
But to stop there for 3 seconds and continue the movement did not work yet 😦 Please tell me how to implement this ??
Issue Analytics
- State:
- Created 5 years ago
- Comments:8
Top Results From Across the Web
How to Create a Motion Path Animation | SVGator Tutorial
In this tutorial, you will learn how to animate SVG along path. Just by adding the Position animator, you can animate an element...
Read more >Animate Anything Along an SVG Path - Codrops
Animate Anything Along an SVG Path. Learn how to code creative animations using SVG paths and the getPointAtLength() function.
Read more >A Guide to SVG Animations (SMIL) - CSS-Tricks
path (attribute) – allows any feature from SVG's path data syntax to be specified in a path attribute to the animateMotion element (SMIL ......
Read more >how to combine svg path animation timeline with svg element ...
If I understand correctly, you need to put this code inside a method. myMethod() { TweenMax.to ...
Read more >How to use the Timeline in Animate - Adobe Support
The timeline shows where animation occurs in a document, including frame-by-frame animation, tweened animation, and motion paths.
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
@Cheizerman my example of solving your problem - https://codepen.io/VitaliyBogdanov/pen/RJJGvO If you need pause when moving in the opposite direction change condition like that:
@VitaliyBogdanov Thank you very much for the solution, but all the same, something is wrong with this currProgreess, with the second iteration isPaused does not work, it does not stop 😦 https://codepen.io/Cheizer/pen/pKKRRq