Jump to content

Abdul Majeed

what does mean end:"+=400" in GSAP scroll trigger

Go to solution Solved by fakesamgregory,

Recommended Posts

In the code pen, I'm not able to understand what that +400 means in the scroll trigger end, Usually i use the end: "90%" to point the 90% of viewport to end it, 


But i have no idea about this "+=400", What this "+=" sign will do, Does it increment with 400 + 400 px ?, or what is the purpose, Kindly some one explain this, 


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

Link to comment
Share on other sites

  • Abdul Majeed changed the title to what does mean end:"+=400" in GSAP scroll trigger
  • Solution

I don't think I can explain any better than the docs already do. What's not clear there?



String | Number | Function - Determines the ending position of the ScrollTrigger. It can be any of the following:

  • String - Describes a place on the endTrigger (or trigger if one isn't defined) and a place on the scroller that must meet in order to end the ScrollTrigger. So, for example, "bottom center" means "when the bottom of the endTrigger hits the center of the scroller""center 100px" means "when the center of the endTrigger hits 100px down from the top of the scroller" (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/viewport. You can also define a single relative value like "+=300" which means "300px beyond where the start is", or "+=100%" means "the height of the scroller beyond where the start is". "max" is a special keyword indicating the maximum scroll position.
  • 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 refreshes and 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.

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 "bottom top".


  • Like 4
  • Thanks 1
Link to comment
Share on other sites

@fakesamgregory Thanks for clearing my doubt, The problem is i may not find the above answers properly in GSAP Documentation, But now i got it,


I really appreciate it, Thanks again

Link to comment
Share on other sites

Just to be totally clear, "+=" prefix just makes it relative to the start position, so end: "+=400" just means "400 pixels beyond wherever the start is".


Have fun!

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.