Grene Posted May 14 Share Posted May 14 Good evening! I've made this scrollytelling script (I call it a "labelroll"), with scrolling cards ("labels") in front of sticky, full-screen backgrounds that fade into view as the corresponding card enters the viewport. I use scrolltriggers to change the opacity of the backgrounds based on the position of the cards, and their positions seem to refresh correctly when resizing the window. However, when changing the orientation of a phone back and forth, they're being positioned wrong. The same behavior occurs when using the rotate button in the device toolbar of Chrome's DevTools. Here's a video illustrating the issue using the included CodePen in debug mode: https://streamable.com/i41sbd. There's two labelrolls in the pen, hence why the first set of backgrounds become unsticked halfway down the page and everything scrolls before the second set sticks. (Please ignore the wrong "labelroll" number on the second set of labels in the video.) I've attempted to solve the issue manually by using ScrollTrigger.refresh() together with a listener for the ScreenOrientation change event. This unfortunately did not work. See the Pen bGydNMv by grene (@grene) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted May 17 Solution Share Posted May 17 Sorry about the delay and the confusion, @Grene Thanks for pointing this out - there was indeed a bug that could affect orientation changes (they wouldn't fire a ScrollTrigger.refresh() properly. That should be fixed in the next release which you can preview at: https://assets.codepen.io/16327/ScrollTrigger.min.js In the meantime, there's an easy workaround: let mm = gsap.matchMedia(); mm.add("(orientation: portrait)", () => { ScrollTrigger.refresh(); return () => ScrollTrigger.refresh(); }); Technically, you could do this instead, but I don't think it's as well-supported across browsers: window.addEventListener("orientationchange", () => ScrollTrigger.refresh()); Does that resolve things for you? 3 Link to comment Share on other sites More sharing options...
Grene Posted May 22 Author Share Posted May 22 On 5/17/2024 at 9:45 PM, GreenSock said: Sorry about the delay and the confusion, @Grene Thanks for pointing this out - there was indeed a bug that could affect orientation changes (they wouldn't fire a ScrollTrigger.refresh() properly. That should be fixed in the next release which you can preview at: https://assets.codepen.io/16327/ScrollTrigger.min.js In the meantime, there's an easy workaround: let mm = gsap.matchMedia(); mm.add("(orientation: portrait)", () => { ScrollTrigger.refresh(); return () => ScrollTrigger.refresh(); }); Technically, you could do this instead, but I don't think it's as well-supported across browsers: window.addEventListener("orientationchange", () => ScrollTrigger.refresh()); Does that resolve things for you? I'm not able to test the preview in my bigger project, but it looks to resolve the issue in a fork of the CodePen. The workaround also looks to be working well in my project! Thank you very much for your help, as always! 2 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