frankwhite_coder Posted February 20, 2023 Posted February 20, 2023 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 Posted February 20, 2023 Posted February 20, 2023 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!
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now