How to change div background image when element reaches a certain scroll height

[dcarrano72]

Hi I am trying to trigger a background image change in the left column when the headings in the right column reach about 400px from the bottom of the screen. The code I have right now changes the images but not at the correct scroll height. Any help would be greatly appreciated. Thanks.

See the Pen abRGdLr by dcarrano72 (@dcarrano72) on CodePen.

[Rodrigo]

Hi @dcarrano72 and welcome to the GreenSock forums!

 

I think you have a confusion regarding how the start and end point work in ScrollTrigger. From the ScrollTrigger Docs:

 

start

String | Number | Function - Determines the starting position of the ScrollTrigger. It can be any of the following:
String - Describes a place on the trigger and a place on the scroller that must meet in order to start the ScrollTrigger. So, for example, "top center" means "when the top of the trigger hits the center of the scroller" (and the scroller is the viewport by default). "bottom 80%" means "when the bottom of the trigger hits 80% down from the top of the viewport" (assuming vertical scroll). You can use keywords like "top", "bottom", "center" (or "left" and "right" if horizontal: true) or percentages like "80%" or pixel values like "100px". Percentages and pixels are always relative to the top/left of the element/scroller. You can even use a complex relative value like "top bottom-=100px" which means "when the top of the trigger hits 100px above the bottom of the viewport/scroller"
Number - An exact scroll value, so 200 would trigger when the viewport/scroller scrolls by exactly 200 pixels.
Function - A function that gets called whenever the ScrollTrigger calculates its positions (typically upon creation and any time the scroller resizes). It should return a String or Number, as described above. This makes it easy to dynamically calculate values. Like all callbacks, the function receives the ScrollTrigger instance itself as the only parameter, so you can, for example, base the position on the previous ScrollTrigger's end like start: self => self.previous().end
This is a static position that is calculated when the ScrollTrigger is created and when the scroller is resized, based on where things are in the normal document flow. It is not constantly recalculated, so for example if you animate the trigger/endTrigger, it won't constantly update the start/end values accordingly because ScrollTrigger is highly optimized for performance. You can call ScrollTrigger.refresh() to force things to be recalculated. The default is "top bottom" unless pin: true is set in which case the default value is "top top".

 

Maybe you're looking for something like this:

gsap.to(".left-column", {
  backgroundColor: "orange",
  scrollTrigger: {
    trigger: ".heading2",
    start: "top botom+=400",
    toggleActions: "play none none reverse",
  }
});

Here is a fork of your codepen:

See the Pen rNqvwNW by GreenSock (@GreenSock) on CodePen.

 

Finally always use markers when developing your app/site. It makes finding and understanding these issues and how ScrollTrigger works far easier.

 

Hopefully this helps.

Happy Tweening!

[dcarrano72]

Thank you!