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