Issue with tweening to label

[Amanda]

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

[GreenSock]

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? 

[Amanda]

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.