Tweening with scroll: keeping the element vertically fixed in the viewport

[SammyC123]

I'm hesitant to continue asking for help on this topic, and I apologize for doing so, but I've yet to encounter an example or use-case that satisfies my needs, so I'm hoping someone with more experience in this realm has a clever solution.

 

What I want seems relatively simple, yet it continues to elude me.  I am tweening an element (police car) along a bezier curve as the user scrolls.  All I want is for that element to stay centered vertically during this process.

 

Why is this so difficult and what am I missing?  Should I be adjusting the scroll rate of the background to match?

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

[Carl]

The basic idea is that as the car travels down along the y axis you want to shift the path up by the same amount which will give the illusion that the car isn't moving.

 

This is a very basic demo with just a single svg element animating along a path horizontally.

 

http://codepen.io/GreenSock/pen/NNbrww

 

I'm just offseting the x position of the parent svg by x value of the car.

 

 

 

If you are doing an x or y tween you can get the x and y values with 

target._gsTransform.x
target._gsTransform.y

I'm not familiar with how this would work in your ScrollMagic setup but if your path and car are in the same parent html element you should be able to apply the same concepts. 

[SammyC123]

Thank you for the reply -- it was very helpful.  I've updated my Codepen to replicate what you did, only vertically.  The GreenSock forums are an invaluable tool and you guys are always ready to pitch in at a moment's notice.  Such an incredible community you have here, and such incredible developers!