HadiH Posted August 4, 2021 Share Posted August 4, 2021 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 Link to comment Share on other sites More sharing options...
OSUblake Posted August 4, 2021 Share Posted August 4, 2021 Hi Hadi! Did you mean to do something like this? end: 'bottom top', Link to comment Share on other sites More sharing options...
HadiH Posted August 4, 2021 Author Share Posted August 4, 2021 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'? Link to comment Share on other sites More sharing options...
OSUblake Posted August 4, 2021 Share Posted August 4, 2021 Yeah, isn't that what you originally had? Link to comment Share on other sites More sharing options...
HadiH Posted August 4, 2021 Author Share Posted August 4, 2021 Yeah, that's why I'm confused why is it not working as expected Link to comment Share on other sites More sharing options...
OSUblake Posted August 4, 2021 Share Posted August 4, 2021 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. 🤷♂️ Link to comment Share on other sites More sharing options...
HadiH Posted August 4, 2021 Author Share Posted August 4, 2021 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? Link to comment Share on other sites More sharing options...
Cassie Posted August 4, 2021 Share Posted August 4, 2021 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. 1 Link to comment Share on other sites More sharing options...
HadiH Posted August 4, 2021 Author Share Posted August 4, 2021 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? Link to comment Share on other sites More sharing options...
OSUblake Posted August 4, 2021 Share Posted August 4, 2021 The trigger gets pinned. The title is just what you are going to animate. 2 Link to comment Share on other sites More sharing options...
Solution Cassie Posted August 4, 2021 Solution Share Posted August 4, 2021 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 3 Link to comment Share on other sites More sharing options...
HadiH Posted August 4, 2021 Author Share Posted August 4, 2021 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now