Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
chrisgannon

Control your Timeline with ScrubGSAPTimeline

Recommended Posts

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

  • Like 6
Link to comment
Share on other sites

Glad you posted here. Thanks!

  • Like 1
Link to comment
Share on other sites

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

 

:)

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