What does "end: top bottom" mean?

[zzkevinlim 2 Likes (Newbie)]

ScrollTrigger has an end property that takes in a/two value(s), my question is what does a value such as "top bottom" mean? I.e. "end: top bottom" or "end: bottom bottom-20px"

[velkas 7 Likes (Newbie)]

I may be wrong but I believe that end: top bottom means to end the animation when the top of the animated element reaches the bottom of the viewport. So end: top bottom-20px would end the animation when the animated element is 20px below the bottom of the viewport.

[zzkevinlim 2 Likes (Newbie)]

9 minutes ago, velkas said:

I may be wrong but I believe that end: top bottom means to end the animation when the top of the animated element reaches the bottom of the viewport. So end: top bottom-20px would end the animation when the animated element is 20px below the bottom of the viewport.

 

I see, so first value is the referring to the animated element, and the second value is referring to the viewport. I see.

[tailbreezy 221 Likes (Specialist)]

Hello fellas,

 

afaik "bottom-20" is invalid syntax. And since it is invalid, it will move you scroller-end anchor to the very top

You should do "bottom-=20" (notice the = sign) which will subtract 20 from the bottom value (e.g 1000 - 20 => 980) so you get 20 pixels from the bottom (upwards).

Likewise there is also "bottom+=20") which will get you 1020 (e.g 20px from the bottom of the screen downwards).

 

Also keep in mind that trying to understand using bottom and top is a little hard because the anchors will move out of the viewport.

 

Use "top center-=100"..."top center+=100" to see the effect in action.

 

Cheers

[zzkevinlim 2 Likes (Newbie)]

1 hour ago, tailbreezy said:

Hello fellas,

 

afaik "bottom-20" is invalid syntax. And since it is invalid, it will move you scroller-end anchor to the very top

You should do "bottom-=20" (notice the = sign) which will subtract 20 from the bottom value (e.g 1000 - 20 => 980) so you get 20 pixels from the bottom (upwards).

Likewise there is also "bottom+=20") which will get you 1020 (e.g 20px from the bottom of the screen downwards).

 

Also keep in mind that trying to understand using bottom and top is a little hard because the anchors will move out of the viewport.

 

Use "top center-=100"..."top center+=100" to see the effect in action.

 

Cheers

 

Good to know, thankyou.