Scroll Trigger doesn't maintain correct state when resizing elements with position sticky

[Bonsai]

I'm running into a resize issue with a slideshow animation I'm working on. When the browser resizes, all the animations are reset to the beginning (see https://ugm-staging.azurewebsites.net/). I've also attached a codepen that shows some of the weirdness I run into. It scales the font size up, but on resize the font size is reset even though it's still scrolled to the same point. Not necessarily unexpected, since my use of overflow hidden is likely throwing a wrench in how scroll trigger handles resizing. Unfortunately, that's required to ensure the slideshow works as expected on mobile devices, as things break when the address bar appears/disappears on them. I've confirmed that scrollTop is unchanged after the animation resets, so it seems that greensock isn't facturing that in for some reason. My idea right now is modify the refresh logic to fix whatever is knocking things out of position, but I'm not sure how best to go about this. Any suggestions would be much appreciated.

See the Pen MWjXdJx by jaandrews (@jaandrews) on CodePen

[ZachSaucier]

15 hours ago, Bonsai said:

my use of overflow hidden is likely throwing a wrench in how scroll trigger handles resizing

Yeah, that's definitely the cause of the issue. 

 

If I were you I would try to fix whatever "breaks" when the address bar appears/disappears. We don't recommend scroll-jacking and what you're doing definitely is scroll-jacking. But if you are going to scroll-jack it likely doesn't make much sense to use ScrollTrigger at all, it'd likely work better with regular tweens/timelines without ScrollTrigger.

[Bonsai]

Yeah, I'm not a fan of scroll jacking either, but it was a requirement of the project unfortunately. Would have preferred to use Scroll Trigger's snapping capabilities. I might be able to hack my way around this issue by recording the progress of each timeline with the refreshInit event and restoring it in the refresh event. I did try this earlier without success, but I might have missed something. I think the scroll trigger was overriding the progress value I set after the refresh event. See below for the basic gist of what I tried before.

var progress;
var tl = gsap.timeline({ scrollTrigger: { ... }});
ScrollTrigger.addEventListener('refreshInit', () => {
  progress = tl.progress;
});
ScrollTrigger.addEventListener('refresh', () => {
  tl.progress(progress);
});

Any suggestions on what tweaks I should make to this logic to make this work, if any? It's a hack for sure, but I'm trying to avoid the need to rework the entire animation.

[ZachSaucier]

Your usage is out of scope for what ScrollTrigger is for so we can't be of much help. Perhaps this thread on the same subject can be of some help:

 

[Bonsai]

I had already looked at those threads unfortunately. The overflow hidden bits are the same thing fullpage.js does. Thanks for the input though. I'll post an update if I find a solution to this issue.