Pausing timeline but NOT tween

[G. Scott]

I have a situation where a slideshow is dissolving between images. I am using TimelineMax and allowing the slideshow to loop endlessly. I need to give the user the ability to pause and restart the slideshow... easy enough using pause(). However I would like to make sure that if an image has already started tweening (dissolving into the next image), that the tween doesn't pause part way through... resulting in two semi-transparent images on top of each other. Is there a way to pause the timeline but allow any existing tweens to complete first?

[Carl]

Not exactly.

 

You can place labels in your timeline after these cross-fades complete.

//transition in slide2
tl.add("slide2")
tl.to(img1, 1, {opacity:0}, "slide2")
tl.to(img2, 1, {opacity:1},  "slide2")

//transition in slide3
tl.add("slide3")
tl.to(img2, 1, {opacity:0}, "slide3")
tl.to(img3, 1, {opacity:1},  "slide3")
tl.add("slide4")

Then when the user wants to pause the timeline, instead of calling pause() you can use TimelineMax's getLabelAfter() to figure out what the next label is and then either

//jump to the next label and pause
pause(tl.getLabelAfter()); 

//or

// smoothly tween to the next label
tl.tweenTo(tl.getLabelAfter()); 

Check the TimelineMax docs for more info on getLabelAfter(): http://api.greensock.com/js/

[G. Scott]

Ah! Awesome + THANKS!

[Jonathan]

Carl, I was very curious about the same question. Thanks for the explanation!

[Carl]

You are both very welcome.