Jump to content
Search Community

TimelineMax Repeats animations starting from unexpected position

aquist test
Moderator Tag

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

The biggest issue is that you created overlapping tweens of the same properties of the same object(s) in your timeline so that the later one(s) overwrote the earlier one(s) and killed them. That's why the 2nd time through, they didn't play as you expected - they had been killed by the auto overwriting (which is GSAP's attempt to protect you from conflicting tweens fighting for the same properties of the same objects). 

 

For example, let's say "element.rotation" starts at 0 and you have a tween to rotation:180 and halfway through that tween, another one starts that's attempting to control the exact same property on the same object, but now it's tweening to rotation:-90. See the dilemma? It will animate from 0 to 90 (halfway to 180) and then BOOM the new tween kicks in and says "whoah, Nelly, I'm takin' over - I found another element.rotation tween and I'm taking over...kill that thing" so it goes from 90 to -90 during that tween. But if the parent timeline repeats, you'll only see it go from 90 to -90 because that first tween has been killed. That's very much by design. 

 

So how do you fix it? There are several options:

  1. Don't create conflicting tweens. 
  2. -OR- Set TweenLite.defaultOverwrite = false; first which turns off overwriting (well, it makes the default overwrite mode to false). 

Does that help? 

  • Like 3
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...