ScrollTriggers are positioned wrong after orientation change

[Grene]

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.

[GreenSock]

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? 

[Grene]

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!

[GreenSock]

FYI, this was resolved in 3.12.7, so you can just update to that and then there's no need for the workaround. 👍