[TimelineMax Repeats animations starting from unexpected position]

This is very helpful! Thank you! I see now... When I allow each individual tween to finish, the repeat begins from the expexted position. Setting "TweenLite.defaultOverwrite = false" fixes the issue pretty easily without having to make any changes but I'll try to rewrite my tween chain without overlaps- for cleanliness.

[TimelineMax Repeats animations starting from unexpected position]

Hi all,

I've just discovered GSAP and think it's the coolest! - but I've run into a small wall.

 

I am making an animation sequence of a dog's front leg while walking- using TimelineMax to animate a few svg paths I've made which represent different parts of the leg- thigh, ankle, etc.  Using a long chain of .to() methods I have been able to animate the leg to swing forward and then back to its starting position.  I want to simulate a walking leg by cycling the animation continuously- using TimelineMax({repeat:-1}) but there is an issue with the repeat.  When the TimelineMax begins the repeat, it starts from a different position than intended.  The start position of the repeat looks different than the original svg (and the svg after animation), making the animation not-smooth and just weird in general.

 

Please check out the codepen linked here.  (note: You'll have to scroll half-way down the page to see the animation).

 

Thanks!

Andre

 

 

See the Pen qdyMBo by andrelindquist (@andrelindquist) on CodePen