Steve Eldridge

Thank you for all your help on this and for posting these answers. I did solve the issue by using jQuery to calculate the progression of the count. Next week I'll figure out the new animation unique to the mobile - horizontal v. vertical. https://codepen.io/drs-nyc/pen/dyVajVm I'll come back to your updates. But, of course, the resizing issue with the sample posted with the two changes would have saved days of trying to figure out how to do it. Oh well, lessons learned. I agree that this library and the samples you have are terrific. I'm going to spend the hours on becoming proficient with this tool. I'm very impressed with what it can do. Unfortunately, I was not planning to hit so many snags, first realizing that scrolling sections would need a completely new approach and that resizing would break using published samples. This is a fantastic resource, and I'll soon get up over that learning curve. But, right now, I know too little to offer practical ideas. Again thank you for the prompt responses. Just knowing I wasn't doing it right was enough to power through to a new approach that did work.

Scrolling to section, animating within that section and then scrolling to the next section. https://codepen.io/akapowl/pen/6a2480c123d88dc391faba0ea5cc590f The original code for scrolling sections sample also broke with resizing but was updated to fix that break. I was hopeful that I would be able to fix my animation with that code as a template but alas that was just another dead end. Scrolling a list of items: https://codepen.io/mikeK/pen/poeBgJO The scrolling list sample code also breaks - the items should be center of screen every time - but I didn't notice it because I wasn't assuming that the GSAP library would be so difficult to use with resizing and I should have tested it before I started down that path - now I know. Nothing is easy to understand with this library and worse, nothing you use will work without extensive testing and knowledge of every possible nuance. I'm stuck in an infinite loop right now. After an entire week of lost time, I'm going to go back to plain javascript to find a way to do this the good old fashion way. I'll perhaps come back to GSAP when I have 100 spare hours or more to learn this thing.

Sounds easy for you and many more hours for me. Now I know this approach is never going to work and I'll have to start over. This animation would seem easy to understand, scroll the page to a section, scroll that section and while doing so add to the list position so that it appears to scroll up and then release the scroll to the following sections. Since the sample code I located on the greensock site lead me in the current direction, I guess I'll need to start over again. Having extensive experience with a library of code provides the confidence to know why things won't work and what will work, sadly I don't have that knowledge yet so I'll just keep on banging my head against the wall. Thanks for confirming I got it wrong.

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.

This is my first big project with GSAP. Made it this far but hitting one last wall. When this animation is resized the y values of the animation don't recover. The animation no longer fails, thanks for the advice here on that, but it still doesn't continue to work after a few resizing events. Best steps going forward?

Thanks for the update. Seems to be working now. I'm going to take the ideas from this code and merge them into the production environment I'm working on. I was familiar with the concepts in the .matchMedia() but since the resizing wasn't able to work, I made no progress with matchMedia. Once I've tried the first updates, I'll proceed to with matchMedia to see if I can address how that would work in the sample you posted.

I followed the solution on referenced posted below I was able to successfully get pinned sections to work with children scrolling. However no matter what I do I can't seem to figure out how to get this solution work with resizing. The sample doesn't - wish I noticed that before I attempted to use this code as a possible solution - so now I'm stuck. After we fix the resizing issues, we'll need to deal with breakpoints. In my target design the scrolling will change from a vertical to a horizontally scrolling animation. Since I'm so new to the library I'm playing catch. Adapting the posted solution code trapped me in a new set of issues. Note: invalidateOnRefresh: true, And I have window.addEventListener("resize", function () {...}); Where there is a function call to kill the ScrollTrigger and another function that is used to build the scrolling on page load that I call again after the loading but it doesn't work. ScrollTrigger.kill(); buildScrollingAnimation(); I'm thinking that I'm yet another few days away from solving this issue after now having spent days getting this to work only to learn that resize and media queries are not easily done after I first learn that getting a ScrollTrigger animation to work in a page of sections also was not an easy thing to do. New challenges using this library around every corner.