Jump to content


TimelineLite and AttrPlugin bug

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've got two timelines, one to display a set of elements, one to hide them again (different orders/durations/eases etc), most of the elements are SVG.


When using the AttrPlugin I'm running into an issue I'm not sure how to resolve: If one timeline overrides the other, properties that are contained in tweens that haven't yet started (ie their delay is greater than the current playhead position) get set to undefined by the second timeline, rather than starting at their current value. 


Concrete example

Timeline 1 will tween x2 on elementA from 0 to 400 between 2s and 4s.

Timeline 2 will tween x2 on elementA from 400 to 0 between 0s and 1s. 

If Timeline 2 is triggered before Timeline1 his 2s, Timeline2 will set x2 to undefined, after which neither timeline will set it again. If Timeline2 is triggered after the 2s, everything is fine. 


Trawling through stacktraces it seems that this._firstPT is set to null for the properties that cause the error. It may be related to the fact I'm creating each timeline from scratch each time they're triggered but I'm not sure how else to do it - I can't just reverse, they're quite different transitions and if I try and reuse I can't work how to properly reset the position of the 'in' transition when the 'out' is triggered - both can repeatedly partially overlap each other. 

Link to comment
Share on other sites

There's a few differences in approach, I'm probably doing something the wrong way but here's a test case:

See the Pen JKFBA by alexgraul (@alexgraul) on CodePen

As you can see x2 ends up set to undefined on the second line. Change the delay on l4 to 0 and all will be well again.


What I'm trying to achieve is I want to switch between the two timelines from wherever the animation currently is when some user interaction happens and that may happen repeatedly very quickly. If there is a cleaner/neater way of doing that than recreating the timelines each time then please tell me how. 

Link to comment
Share on other sites

Aha, I see the issue. I needed to tweak something in AttrPlugin so that if the starting and ending values are identical, it handles that situation fine. I've attached a preview of 1.10.1 which has the new AttrPlugin. Let me know if that resolves things for you. 


Link to comment
Share on other sites

Perfect, thankyou for the super-quick turnaround!

On a related note - is the approach I'm taking the most efficient one for the use case? It obviously works but I'm not clear on if there's a better way. 

Link to comment
Share on other sites

I'm not entirely clear on what approach your taking now actually. Maybe if you created a codepen that'd help. The one you posted earlier was just using a setTimeout(), but I assume that was just to artificially induce things. 


If you're trying to bounce back and forth between 2 animations, you can certainly just create a TimelineLite for each, and then call pause() and play() accordingly. When you pause() one, play() the other, and visa-versa. There are many ways you could do it, actually. 

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