JoelDenne Posted August 4, 2021 Share Posted August 4, 2021 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 Link to comment Share on other sites More sharing options...
Solution OSUblake Posted August 4, 2021 Solution Share Posted August 4, 2021 Try using ScrollTrigger.saveStyles() before you media queries. ScrollTrigger.saveStyles(".expanding-image-img") And using invalidateOnRefresh: true 2 Link to comment Share on other sites More sharing options...
JoelDenne Posted August 4, 2021 Author Share Posted August 4, 2021 Thank you so much @OSUblake, that's done the trick! 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