Jump to content
Search Community

ScrollTrigger resizing issue with pin

Julien G test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

  • Solution

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. :)  

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...