Animate background image position on scroll while keeping the section pinned

[frankwhite_coder]

Hi, Wondering if anyone can point me in the right direction, I am trying to animate the background position of a div while it is pinned on the screen,

 

The section will be fixed, then as the user scrolls the position of the image will change (it's a big map) every 100px or so, but I am having trouble setting up the incremental background position changes, here is what I have so far, but I can't get the scrub back and forth to work,

 

 

Is it also possible to snap to each animation? Or would I be better off setting up fake divs inside the map to trigger the animations and snap to?

 

Any help would be greatly appreciated.

 

See the Pen gOdPGQV by frankwhite_coder (@frankwhite_coder) on CodePen

[Rodrigo]

Hi @frankwhite_coder and welcome to the GreenSock forums!

 

There are a few things I spot in your code, one of them is that you're creating far too many ScrollTrigger instances, I think you should start with just one.

 

The other is that you're using just set() instances. If you check the docs you'll see that set instances last zero seconds, so regardless of the scroll amount those styles will be updated immediately.

 

Here is a fork of your codepen:

See the Pen eYLJeqx by GreenSock (@GreenSock) on CodePen

 

Hopefully this is enough to get you started.

Happy Tweening!