Tweening an Object Along a Bezier Curve Based on User Scroll

[SammyC123]

Is it possible to advance the tween of the car moving down the path based on the user's scroll, or do I need an additional library (e.g. ScrollMagic) to accomplish this?

 

To reiterate/clarify, if the user presses the down arrow or uses their scroll wheel, I want the car to move down the path.  I would like to solve this problem purely with GreenSock.

See the Pen EKKyxa by anon (@anon) on CodePen

[Carl]

when it comes to scroll-driven animation, you can't beat using ScrollMagic with GSAP.

 

However, if you want to roll your own solution the basic mechanics of controlling a tween or timeline via scroll can be seen here:

 

http://codepen.io/adrianparr/pen/mbrqt

 

The basic idea is that you convert the scroll position to a value (between 0 and 1) that you pass to the progress() of a tween or timeline.

 

However, its best not to attach functions directly to the scroll event as they can fire way more often than you need and can impact performance.

This pen by Diaco illustrates how to throttle the callbacks that get fired from scroll or resize: http://codepen.io/MAW/pen/yewOgZ

[SammyC123]

Thank you so much, Carl.  Your solutions were precisely what I was looking for, but at your recommendation I am going to try making it work with ScrollMagic.  I deeply appreciate how you always seem to have relevant examples at hand.

[SammyC123]

Curiously, I tried replicating this ScrollMagic example on Codepen to play around with it, and while it works just fine, the smoothness of the animations is vastly subpar.  Any idea why that would be?  I think it has something to do with the viewport, but I'm uncertain.  I know this is probably outside the scope of your support, but I thought you might know off-hand why it would be occurring.

 

Here's my version:  

See the Pen VajVNW by anon (@anon) on CodePen