Play or reverse timeline to a specific label or time?

[Kenner Stross]

I would like to be able to scatter labels through my timeline (no problem, so far!), and then go into reverse mode and play backwards to one of those specified labels - rather than playing backwards all the way to the beginning. Likewise, I would like to be able to play forwards in a similar fashion - only up to a specified point. Is this possible?

[ZachSaucier]

Definitely! There are lots of ways to setup this sort of thing.

 

In particular, check out the .tweenTo() and .tweenFromTo() methods of timelines.

 

If you need more control, you could tween the progress of a timeline like so:

tl.pause(); // Make sure it's in the state that you want it to be in
gsap.to(tl, {progress: tl.labels["myLabel"], ease: "none"});

Though with the above you'd need to calculate the duration of the tween if you want it to be dynamic.

 

Alternatively you could use a custom callback that pauses it if the timeline is reversed:

See the Pen jOWOrBM?editors=0010 by GreenSock (@GreenSock) on CodePen

[PointC]

You can also take a look at previousLabel() and nextLabel(). 

 

https://greensock.com/docs/v3/GSAP/Timeline/previousLabel()

https://greensock.com/docs/v3/GSAP/Timeline/nextLabel()

 

Happy tweening.

 

[Kenner Stross]

Perfect - thank you both!

[Carl]

This post reminded me that I had promised to release a video from my courses about this to the public.

 

The video below shows how powerful tweenTo() and tweenFromTo() are as they enable you to play any segment of a timeline in any direction any amount of times. You can also nest those segments in other timelines unlimited times. It's NUTS!

 

demos free on the blog: https://www.snorkl.tv/gsap-tweento-and-tweenfromto/