tomw_uk Posted February 14, 2021 Share Posted February 14, 2021 Hi there, I'm using ScrollTrigger to show and hide a navbar based on the position of the page scroll, but I've noticed that if I change the length of the DOM, ScrollTrigger's progress does not update. Hopefully it's clear in this example. If you scroll up and down, you'll see the progress is reported accurately at the top of the page. If you then click "Show Box 2" and continue to scroll up and down, you'll get to 100% before reaching the end of the page. Is the solution here to call .refresh() when doing anything like this, or is there a better solution? Thanks in advance, Tom. See the Pen NWbdZYz by tomwelch (@tomwelch) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted February 14, 2021 Share Posted February 14, 2021 Hey @tomw_uk Yes, calling a .refresh() is what you'd want to do, so ScrollTrigger can adjust to the new content height. I found that calling it in an click event via JS would not work as expected though, without calling it with a slight delay. I'm using a gsap.delayedCall for that here. See the Pen 2ce7fbcfe05fe8ec225e1f43c6c95519 by akapowl (@akapowl) on CodePen Edit: Another option could be to do a safe refresh See the Pen 01444890c9d9bb2234bfa2d56aab27ea by akapowl (@akapowl) on CodePen ScrollTrigger.refresh( safe:Boolean ) ; safe: Boolean If true, it will wait for at least one requestAnimationFrame tick, and up to roughly 200ms before initiating the refresh. This is useful because sometimes the browser doesn't actually render the DOM-related changes immediately, causing measurements to be inaccurate. For example, if you add a "click" event listener to an element that expands other content on the page and you call ScrollTrigger.refresh() in that callback, the changes may not have been fully rendered by that point, so it's the perfect place to enable safe. From the docs. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh() Hope this is helpful. Cheers. 3 1 Link to comment Share on other sites More sharing options...
tomw_uk Posted February 14, 2021 Author Share Posted February 14, 2021 That’s super helpful thank you @akapowl! And thanks for the tip on the delay / safe refresh. I’m sure you’ve saved me hours of banging my head on the table! 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