Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
zzkevinlim

What does "end: top bottom" mean?

Go to solution Solved by velkas,

Recommended Posts

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"

Link to comment
Share on other sites

  • Solution

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.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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.

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.
×