nickraps Posted February 8, 2022 Share Posted February 8, 2022 Please see the CodePen demo. First, scroll the page down to see how the pinning behaves (normally). Then, click the button to show the additional element, then scroll the page again to see how the pinned element's position is wrong. How can I make sure the element is always pinned at the correct time and location? Not affected by showing/hiding other elements above it on the page? See the Pen JjOEQxw by noahsong (@noahsong) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted February 8, 2022 Solution Share Posted February 8, 2022 Hey there, @nickraps You'll need to call ScrollTrigger.refresh() whenever your page-layout changes like that / has finished changing. See the Pen podeoPR by akapowl (@akapowl) on CodePen More on that in the docs: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh() On a different note; I noticed you are using GSAP / ScrollTrigger v3.3.3 in your codepen demo. I'd strongly suggest updating to a more recent version if you can, as there have been a lot of additions and fixes since that version you are using now. Happy scrolling! 2 Link to comment Share on other sites More sharing options...
nickraps Posted February 8, 2022 Author Share Posted February 8, 2022 @akapowl Thanks! And from the doc it seems like the method will automatically refresh all triggers on the page which is perfect for my case. 1 Link to comment Share on other sites More sharing options...
nickraps Posted February 8, 2022 Author Share Posted February 8, 2022 @akapowl Quote I noticed you are using GSAP / ScrollTrigger v3.3.3 in your codepen demo. Where should I fork the CodePen template with the latest GSAP? I typically just fork one from the demos on the doc pages which apparently is not using the latest. Link to comment Share on other sites More sharing options...
akapowl Posted February 8, 2022 Share Posted February 8, 2022 You can find a link to this GSAP Starter Pen / Template in the guide for how to create a minimal demo See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
OSUblake Posted February 8, 2022 Share Posted February 8, 2022 17 minutes ago, nickraps said: I typically just fork one from the demos on the doc pages which apparently is not using the latest. Which demo was that? I can update it. 1 Link to comment Share on other sites More sharing options...
nickraps Posted February 8, 2022 Author Share Posted February 8, 2022 @OSUblake The one in "How does duration work with scrub: true?" section on this page: https://greensock.com/docs/v3/Plugins/ScrollTrigger Link to comment Share on other sites More sharing options...
OSUblake Posted February 8, 2022 Share Posted February 8, 2022 Thanks, done! 1 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