ScrollTrigger end point

[HadiH]

Hi, I am trying to create a view where the title is pinned to the top until the end of #section so I set endTrigger to #section but the end point didn't go as expected. Any help would be appreciated.

 

 

See the Pen dyWqyLY by hadiihartono (@hadiihartono) on CodePen

[OSUblake]

Hi Hadi!

 

Did you mean to do something like this?

end: 'bottom top',

 

[HadiH]

Hi @OSUblake,

 

No, it isn't. The scrollTrigger should end when the bottom of #section pass the end of viewport, so I suppose it should be 'bottom bottom'?

[OSUblake]

Yeah, isn't that what you originally had?

[HadiH]

Yeah, that's why I'm confused why is it not working as expected

[OSUblake]

It's doing what you're telling it to, so I'm not sure I understand what your question is then. Maybe the markers are confusing you because of the pinning action. 🤷‍♂️

[HadiH]

 

Sorry if my description earlier is not clear enough. Here's what I'm trying to do. I want to pin the title till the end of section but the current end point isn't at where I want it to be. Is it clearer now?

[Cassie]

If you make the browser window longer you can see that the end trigger's in the right place - It just doesn't appear so because that section is pinned. If you pin a section it's pinned - when you unpin the page will continue scrolling - you can't pin a section that's higher that the viewport and expect it to unpin when the bottom of the section scrolls past. That's conflicting logic.
 

[HadiH]

19 minutes ago, Cassie said:

If you pin a section it's pinned - when you unpin the page will continue scrolling

I get this part

 

19 minutes ago, Cassie said:

you can't pin a section that's higher that the viewport and expect it to unpin when the bottom of the section scrolls past

by this you mean I can't pin a section which has greater height than viewport, right? But I didn't pin the section though? Or a trigger element is pinned as well?

 

19 minutes ago, Cassie said:

It just doesn't appear so because that section is pinned

i thought the section only serves as trigger and the pinned one is title only?

[OSUblake]

The trigger gets pinned. The title is just what you are going to animate.

 

 

[Cassie]

If you're not animating anything and just want to pin you can do ScrollTrigger.create() instead. A bit more readable maybe?

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

[HadiH]

14 minutes ago, OSUblake said:

The trigger gets pinned. The title is just what you are going to animate.

Ahh, i see... I didn't know that before. Thanks for the explanation.

 

12 minutes ago, Cassie said:

If you're not animating anything and just want to pin you can do ScrollTrigger.create() instead.

Okay, will do.

 

Thanks for the help @OSUblake @Cassie