Timing With MotionPathPlugin

[Andy1708]

I try the MotionPathPlugin to move the octopus along this path but it seems not to be perfectly synchronize every time in the loop animation.

what am i doing wrong ?

I put a white stroke to see the path.

You can fork the codepen if you want and comment each animation on the mainTl (eyeTween, octopusTween, movePathTween) to see what's happened behind the scene.

Thanks for your answer

Yves

See the Pen dyPqPKj by YVES_V (@YVES_V) on CodePen

[ZachSaucier]

Hey Andy,

 

This is because you have repeat: -1 on each of the sub-timelines. That means that they will each repeat as soon as they complete, regardless of the other animations, for infinity. In other words, the master timeline (mainTL) will never repeat because its children never finish animating. 

 

What you should do instead is arrange it so that all of the children timeline end at or near the same time. That may require some calculation depending on how you set it up. Then you can put a repeat: -1 the master timeline and have the whole thing repeat. 

 

Does that make sense?

[Andy1708]

Yes that make sense for me.

But it is possible to repeat 3 time a child timeline (octopusTween timeline) and repeat -1 the mainTL ?

i have modified the codepen in this direction. Have a look.

Yves

[ZachSaucier]

10 minutes ago, Andy1708 said:

it is possible to repeat 3 time a child timeline (octopusTween timeline) and repeat -1 the mainTL ?

Ya, no problem.