ScrollSmoother - resume play on manual scroll position

[dasein]

Hello! I'm having trouble figuring out how to resume playback of a timeline that tweens ScrollSmoother after it has been paused and position of the scroll position has been updated via manual scrolling. I want the user to be able to play the timeline, but if they pause the timeline and manually scroll to a new position and hit play again, I would like that the timeline plays from the new scroll position at the same speed at which it had left off. As you can see in the codepen, if the user pauses and manually scrolls to a new position and hits play again, they will jump to the position where they hit pause. I've tried several different methods which haven't worked. I'll spare the details of those failed attempts, but to summarize, updating the timeline progress with the scrollsmoother's progress on scrollsmoother updates did not work because there could be more scrolling area on the scroll smoother than there is area on the timeline scroll as well as the fact that the scrollsmoother progress is linear while in my example the timeline progress is not since there are sections of the timeline which scroll at different speeds as you can see in the codepen. Thanks in advance for the help and amazing products!

See the Pen zYLgKzM by vanceingalls (@vanceingalls) on CodePen

[GreenSock]

Hi @dasein. Yeah, that's not a trivial thing. It's totally doable, though. It's beyond the scope of help we can provide for free in these forums, though. 

 

If I were approaching this, I'd probably make a duplicate of that timeline except that it animates a generic object like {scrollTop: 0} purely for performance reasons because I'll be iterating over it quite a bit and I'd want it to be as fast as possible and not actually scroll anything or trigger rendering in the browser. Then, I'd create a function that you can feed a scroll position to and it iterates over that timeline in specific increments and checks to see if it reached the target value yet. Once it goes past it, calculate the interpolation necessary to plot the exact progress value on that timeline that it occurs and return that. Bingo, now you've got a function that'll translate a scroll value to a progress value. 

 

If you'd like us to write that for you, feel free to contact us about our paid consulting services. Otherwise, I hope I've given you enough to run with it on your own and get your project across the finish line. Good luck!

[dasein]

On 2/10/2023 at 11:10 PM, GreenSock said:

Hi @dasein. Yeah, that's not a trivial thing. It's totally doable, though. It's beyond the scope of help we can provide for free in these forums, though. 

 

If I were approaching this, I'd probably make a duplicate of that timeline except that it animates a generic object like {scrollTop: 0} purely for performance reasons because I'll be iterating over it quite a bit and I'd want it to be as fast as possible and not actually scroll anything or trigger rendering in the browser. Then, I'd create a function that you can feed a scroll position to and it iterates over that timeline in specific increments and checks to see if it reached the target value yet. Once it goes past it, calculate the interpolation necessary to plot the exact progress value on that timeline that it occurs and return that. Bingo, now you've got a function that'll translate a scroll value to a progress value. 

 

If you'd like us to write that for you, feel free to contact us about our paid consulting services. Otherwise, I hope I've given you enough to run with it on your own and get your project across the finish line. Good luck!

Thank you! I didn't use this exact technique since I couldn't figure out what to interpolate on a duplicate timeline but I was able to use interpolation on something else that did the trick!