Jump to content


Issue with tweening to label

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

Hello GSAP!


I am working on a function, which is going to trigger timelines to tween to label (which are created within the function) when the relevant div is in view. (The ultimate goal is for there to be an infinite number of divs with class .doubleSlide, and the client will be adding the content).


The first trigger works just as I expect

timelineID.tweenTo('end' + i);

HOWEVER, the tween back to the beginning is not working :(

timelineID.tweenTo('start' + i); 

I have the triggers logging in the console, to make sure that the calculation of when the divs are in the viewport are correct, and, that is all functioning as expected. 


I suspect this is due to generating new timelines as part of an anonymous function, but it's confusing me why it works as you scroll into view, and not out of view. 


I appreciate any insights. 

Thanks! Amanda

See the Pen 4069d6655071a57cfa3286ff4c0f4c4a by ald603 (@ald603) on CodePen

Link to comment
Share on other sites

It looks like it's because you're re-creating that timeline each time and then in the case of the .tweenTo("start" + i), you're literally telling it to animate the playhead to the beginning but it's already at the beginning (thus it doesn't go anywhere). See what I mean? 


Did you intend to just reverse() the previously-created timeline maybe? If so, you could just store it as a variable and call reverse() on it. 


I'd recommend being careful about using "scroll" events which literally fire constantly during the scroll - it can be expensive to keep re-creating animations over and over again. I imagine that maybe you meant to just trigger the animation once when something scrolls into view (and then once when it scrolls out of view) instead of over-and-over again while scrolling? 

  • Like 3
Link to comment
Share on other sites

I think I need to rethink how I'm doing this a little bit, what you are saying makes a lot of sense. Thank you for your input. I'll post my new code when I'm done working on it. 

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