Thanks for the response. Perhaps it would be easier to understand when you load animation. Run it once, then resize the viewport by resizing your window and scroll the animation again. The question is not about the webgl animation, that works just fine when resized - more or less - the issue is that the scrollTrigger animation that progresses up or down by a y value of 120px to create the scrolling list then stops working correctly by the y value, hence why I said "y values of the animation don't recover."
I've removed all the code not required to show the GSAP portion that is not resizing by the Y value of the scrolling box in the animation.
https://codepen.io/drs-nyc/pen/XWeOeer
So we're only talking about this code - .to(".qualities", { y: "-=120px",
Here's the full reference in the CodePen.
triggers.forEach((triggers, i) => {
var tl = gsap
.timeline({
scrollTrigger: {
trigger: "section.animationSection",
start: () => "top -" + window.innerHeight * (i + 0.5),
end: () => "+=" + window.innerHeight,
scrub: true,
markers: true,
toggleActions: "play none none reverse",
invalidateOnRefresh: true,
onLeave: (self) =>
updateElement((currentCount += self.direction), "onLeave"),
onEnterBack: (self) =>
updateElement((currentCount += self.direction), "onEnterBack"),
onUpdate: (self) => updateAnimation(self.progress)
}
})
.to(".qualities", {
y: "-=120px",
duration: 0.75,
ease: "power1.inOut"
});
});
Before Resize:
After resize the "Y" value of the scrolling text list jumps up by a new value and no longer progresses correctly. Hard refresh at this size recovers immediately and correctly, so this is just limited to the interactions with the GSAP portion of the code and the 24 lines specific to the scrollTrigger.