Jump to content
Search Community

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

dcarrano72 test
Moderator Tag

Recommended Posts

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!

  • Like 2
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...