ScrollTrigger.refresh() not working as expected on resize

[JoelDenne]

Hi

 

Thank you for an amazing plugin that has really opened up a whole new range of possibilities for building creative websites!

I am having some issues with resizing and ScrollTrigger, I've searched the forums but can't seem to find a similar issue.

It's my understanding that ScrollTrigger/Scrub animations should refresh when the browser resizes but it's not working right for me.

 

If you scroll down you'll see two images that expanding to be 100vw on scrolll, but if you resize the browser down, and then back up again - it doesn't work anymore.

 

I've also tried calling ScrollTrigger.refresh() manually like so but it makes no difference:

 

$(window).bind('resize', function () {
        if (window.RT) clearTimeout(window.RT);
        window.RT = setTimeout(function () {
          ScrollTrigger.refresh();
        }, 500);
      });

 

I have several other ScrollTrigger sections on one page, but managed to isolate it to the codepen demo too so I don't think the other ones are affecting it, but I may be wrong.

 

https://codepen.io/joeldenne/pen/QWvVEBO

 

Would appreciate any help - thank you in advance!

See the Pen QWvVEBO by joeldenne (@joeldenne) on CodePen

[OSUblake]

Try using ScrollTrigger.saveStyles() before you media queries.

ScrollTrigger.saveStyles(".expanding-image-img")

 

And using invalidateOnRefresh: true

[JoelDenne]

Thank you so much @OSUblake, that's done the trick!