Animation does not repeat from the start position?

[szabkel]

Hello!

I am totally new to greensock and animation in general, so bear with me.

I started messing around with SVG path morphing and don't know how to solve the problem with this one.:

 

I got an svg from flaticons and loaded it into AI, added a few arrows and a single path which they should follow.

Without pressing any buttons, the arrows seem to always go back to their start position without any additional animation, but If I press any of the speed buttons, the arrows start to animate from their end position to their start before even beginning the loop, making this kind of unintended animation back to the start position. I expected them to "teleport back" to their start before each loop.

 

Why does this happen?

 

Thanks for you help!

air-filter.svg

See the Pen WWJmbJ by anon (@anon) on CodePen

[PointC]

I don't have time to go through your whole pen, but my advice would be to create the entire animation (arrows and spinning blade) on one master timeline and then adjust the timeScale() when you click the speed +/- buttons. More info about timeScale();

 

https://greensock.com/docs/TimelineMax/timeScale()

 

Happy tweening.