Jump to content
Search Community

Animate background image position on scroll while keeping the section pinned

frankwhite_coder test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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!

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...