How to use TIMELINE in SVG motionPath animation?

[Cheizerman]

Friends, 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 ??

[VitaliyBogdanov]

Try to use two animation with 50% of path. Use delay on second.

[VitaliyBogdanov]

And you can check animation progress and catch 50%. Then run .pause and wait 3sec then .play 🙂

[VitaliyBogdanov]

http://animejs.com/documentation/#update Here update callback example

[Cheizerman]

@VitaliyBogdanov Thank you for the answer, but the fact is that you can not use two animations for one object as a SVG MOTION PATH, TIMELINE method and .ADD properties can not be applied as in this example: http://animejs.com/documentation/#basicTimeline

But with CALLBACKS a good idea, but it is already difficult for me, requires knowledge of pure JS, but I would like to implement it with the help of the library ANIME.JS.

[VitaliyBogdanov]

@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:

if(currProgress == 100) {
  isPaused = false;
}

[Cheizerman]

@VitaliyBogdanov Thank you dear friend! Your code solves this problem. Everything is super. Only there is some kind of glitch, when I increase the duration from 3000 for example to 6000 then the item gets stuck in the middle and jerks :))) both on the way forward and backward. Why is this happening? Example: https://codepen.io/Cheizer/pen/pKKRRq

[VitaliyBogdanov]

@Cheizerman In second condition set:

if(currProgress == 46) {

[Cheizerman]

@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