Julien G Posted April 19, 2022 Share Posted April 19, 2022 Hey, when an element is pinned, it's not resized with the browser but has a delay before it gets resized, I assume it's for performance issue, but how can I avoid this? This can be viewed on the codepen: make the browser small, wait few seconds, and then make it bigger. See the Pen RwxvoOK by juliengmd (@juliengmd) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted April 19, 2022 Solution Share Posted April 19, 2022 Yes, that is very intentional. In order to correctly accommodate all the advanced functionality of ScrollTrigger (especially pinning), it must essentially tear down any changes it made to the layout, restore the original state of the page and start doing its measurements from the top-down (pinning likely affects positioning of triggers further down on the page). This is an expensive procedure. It would be totally wasteful to force all that work to be done every time the "resize" event fires on the window. Let's say someone resizes their browser to be 300px narrower, for example - the resize event may fire 30 times over the course of that drag, so you'd be having the browser do all that extra work 29 times and slow everything down. Not a good user experience. Therefore, ScrollTrigger waits until at least 200ms elapses since the last "resize" event to fire its .refresh() logic. To answer your question, yes, you could add a "resize" event listener on the window and fire a ScrollTrigger.refresh() manually. But keep in mind the tradeoffs I mentioned above. I certainly wouldn't recommend it. The only people who seem to care about how things look DURING resize are designers. Most typical users don't think that way and would much prefer a better-performing experience during the drag. 3 Link to comment Share on other sites More sharing options...
Julien G Posted April 19, 2022 Author Share Posted April 19, 2022 Thanks for you answer. You convinced me and I think i'll stay with the 200ms "delay" ☺️. I maybe found a workaround, by wrapping the content of the pinned element in a div, with width: 100vw. This way, ScrollTrigger.refresh() is still performed 200ms after the last "resize" event, and the content is resizing with the browser ☺️. See the Pen YzYBQQQ by juliengmd (@juliengmd) on CodePen 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