Jump to content


Ironing out interpretation of overlapping events

Moderator Tag

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

I have three timelines, playButtonAppear, playButtonPulse, and playButtonDisappear.


Basically, the appear and disappear ones will always overlap the basic pulse state, so the goal is to smoothly transition between the pulse's bounce, and the animation of the appear or disappear.


To control this, there is an offset where one meets the other, and fiddling with it helps to dial in to make sure the overlapping items are in sync.


This is all great, but I'm noticing that the values I set (even when absolute as opposed to += or -=) are not the actual values being used.  For instance, if say I want the pulse to shrink down to 0.8 scale, it will shrink down anywhere from no shrink down to 0 scale depending on exactly where it intersects the appear timeline.  The results also differ based upon load times for the page... if one timeline was bumped a bit, the values for the next one overlapping it are different.


This is not what I want.  I want it to exactly shrink and grow under all circumstances from the absolute values I've set.  I understand this will mean some nasty jumps if the interval overlap timing isn't correct, but I can work to dial that in.  If I say shrink down to 0.8 and loop, for instance, it should always oscillate between 1 and 0.8 regardless of where the previous timeline had it when they overlapped.


I'm not sure what this sort of interpretation is called, but I vaguely remember stumbling across it once in the documentation.  Any pointers as to how to alter this behavior?

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

Link to comment
Share on other sites

Hi Heffalump,


I'm not exactly sure if I understand what the problem you're seeing is, but it sounds like your issue might stem from your elastic ease and then setting the scale to 0.8 in the next tween, which is being repeated. So its scaling between those 2 values, whatever they may be at the time, and not 1.0 - 0.8.


See the Pen bNoNqM by osublake (@osublake) on CodePen

Link to comment
Share on other sites

Yes, basically.  It isn't actually doing 1 (basis) to 0.8 (defined in looping to statement).  It is instead using whatever value it happened to be on when the tweens crossed eachother on the timeline.  I remember seeing something about this kind of interpretation when they overlap.  Just can't rememberr what it's called.  I'll dig into your altered pen to see what's different as soon as I wrap up what's in front of me.

Link to comment
Share on other sites

Not sure what you might be referring to, maybe overwrite? But the problem is your repeat is going to animate between its previous state, and not its default state like you were expecting. So if the previous animation was at a scale of 1.2 when the repeat tween starts, its going to repeat back and forth between 1.2 and 0.8. Adding in an extra to tween with the default values for the repeat should normalize your animation.

  • 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.