Gsap only resizes content as soon as I stop resizing my browser

[lumuxd 6 Likes (Newbie)]

I have a centered element on my page and when I resize my browser, the element only moves back to the center as soon as I stop resizing the window. Fonts with viewport-related sizes are changing dynamically.

I think this is caused by the pin-spacer over my whole element - is that possible? I noticed that it sets itself a fixed width every time I stop resizing.

Changing

pinSpacing: true,

to

pinSpacing: false,

does not solve the problem.

 

Is there maybe a way to let the element check the browsers width while resizing the window too?

 

Thanks!  

[OSUblake 18,475 Likes (Superhero)]

Resizes are debounced for performance. There's really no need to recalculate stuff until the browser size has settled. If you want to listen for resizes you can use add an event listener.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.addEventListener()

 

[lumuxd 6 Likes (Newbie)]

Thanks,

this worked for me:

window.addEventListener('resize', function(event){

ScrollTrigger.refresh();

});

 

 

[Cassie 5,128 Likes (Superhero)]

Just echoing this

 

1 hour ago, OSUblake said:

There's really no need to recalculate stuff until the browser size has settled.

 

Listening to the resize event and recalculating during resize is a pointless performance drain in most cases. It's a lot of work for the browser and most people don't even look at the content while they're resizing. It's a really small micro detail that devs obsess over - but it's not really of concern to the average user.

[lumuxd 6 Likes (Newbie)]

Yes that is definitely true, its just for a very specific case