Jump to content
Search Community

Self playing timeline that speeds up on scroll

Samaritan test
Moderator Tag

Recommended Posts

Hello,

 

We have an animation that is being constructed with a timeline, it has several child timelines but I'm not sure that is relevant to my question. I want the animation to be controlled by scrolling, which we are using a scroll trigger for, but we also want it to play by itself (i.e. the user clicks go and it plays through), if it's playing by itself and the user scrolls we want the animation to speed up a bit. Which I think the scrub property on the scrolltrigger with a number does. Is there an official way to handle that or will we need to code in a bunch of if and when and thens?

 

Thanks for your help

Link to comment
Share on other sites

13 hours ago, Samaritan said:

I want the animation to be controlled by scrolling, which we are using a scroll trigger for, but we also want it to play by itself (i.e. the user clicks go and it plays through), if it's playing by itself and the user scrolls we want the animation to speed up a bit.

It would be logically impossible to have the scrollbar control the progress (scrubbing) AND be able to play it independently and have it synchronized properly. That'd sorta be like clicking the "play" button on a YouTube video but not have the progress scrubber move at all while playing, and then expecting that people could grab the scrubber to accurately control it too. If the video is 70% done but the user grabs the scrubber from the very start (because it hasn't moved at all, out-of-sync), what would you expect to happen as a user? If it picked up the progress from wherever it's at, that'd mean it'd suddenly become impossible to ever make it go back to the beginning. 

 

But you could totally accomplish what you're asking if you just animate the scroll position to "play" the animation (like auto-scrubbing it). That'd keep everything perfectly synchronized. Here's a simple demo: 

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

 

Does that answer your question? 

  • Like 1
Link to comment
Share on other sites

Thanks all, great forum and community support!

 

Jack - I take your point and I was trying for that but couldn't get it going, thanks for the sample as this has helped me get it very close to what I'm expecting. I'm now looking into starting the automated scroll up again once the scrub of scrolltrigger has finished and I think that will take it across the line.

 

Cheers!  

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