Docs on start/end parameters for ScrollTrigger

[Tim Spiral Edge]

Are there any more complete docs for start/end parameters in ScrollTrigger.

 

The docs here: https://gsap.com/docs/v3/Plugins/ScrollTrigger/start say it's a single numeric parameter but many of the examples show top/bottom/centre/80% etc. It would be helpful to read about how these work. Thank you. 

[GreenSock]

Sorry if that was confusing, but let me clarify...

 

You define the start/end values in the vars object when creating a ScrollTrigger, but then that gets parsed into a numeric property value which is what you were looking at in the docs. That property on the ScrollTrigger instance is ALWAYS a number because it's the result of the calculations at that particular viewport size. If you resize the viewport, the number would likely change. But again, that's the result of all the calculations that are based on the start/end values you defined in your vars object. 

 

So for example, let's say you did this: 

let st = ScrollTrigger.create({
  trigger: ".trigger",
  start: "top center"
});

Notice the start was set to "top center" which just means "when the top of the trigger element hits the center of the viewport", but then if you check st.start you'll see a number like 523 which simply means that the ScrollTrigger will start when the page scrolls 523px from the top - that is where the top of the trigger hits the center of the viewport. 

 

If you then resized the viewport and check st.start, it may be a completely different number, like 418 which means that now that ScrollTrigger will start when the page scrolls 418px from the top because now that is where the top of the trigger hits the center of the viewport. 

 

So you were looking at that property in the docs rather than the vars configuration object properties. 

 

Here's an excerpt from the ScrollTrigger docs for the vars.start property:

Quote

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". clamp() the value (version 3.12+)Wrap your start value in "clamp()" to tell ScrollTrigger to always keep the calculated value between 0 (the top of the page) and the maximum scroll position so that it'll never leak outside the page bounds. Practically-speaking, this ensures that any "above the fold" (triggers inside the viewport at the top of the page) won't start out with partially-scrubbed animations. For example, start: "clamp(top bottom)" - any normal string-based value can be inside the clamp(). Like "clamp(20px 80%)". Here's a video explaining further:

Is that what you're looking for? 

[Tim Spiral Edge]

Thank you. That's exactly what I was looking for!