Control your Timeline with ScrubGSAPTimeline

[chrisgannon]

Hi,

 

I made this tool called ScrubGSAPTimeline a while back that enables you to scrub through a timeline using your mouse. Not sure why I never posted it here. Or maybe I did - my memory is terrible.

 

Anyway you can move your mouse out of the window to play the timeline animation and it plays from where your mouse was inside the window - so if your mouse was 45% along on the X axis of your window when it left, your animation will play from 45% of the way through the timeline's duration.

 

You can also double click to pause scrubbing. This is useful if you want to right click and inspect an element in dev tools.

 

You'll need to set the position of your main DIV/SVG container to absolute (I think!) otherwise you won't see the time display.

 

I use this on every single animation project I make now so I hope you find it as useful as I do.

 

GitHub

https://github.com/chrisgannon/ScrubGSAPTimeline

 

CodePen demo:

 

Cheers,

 

Chris

See the Pen zGmdBN by chrisgannon (@chrisgannon) on CodePen

[Carl]

Glad you posted here. Thanks!

[PointC]

Very nice Chris! Thank you for sharing with the community.