ercb

That's exactly what I was looking for, thank you for the info and link to the docs!

Sorry, I had added ScrollTrigger.config({limitCallbacks: true}); Which kind of resolves the problem, but doesn't get at the core of what I was hoping to accomplish, which is to set up individual batches of animations based on a container class. It also introduces another issue, which is that if you scroll back up, the animations don't play, but I'm sure that's just a lack of my understanding of Greensock. I have commented out the above line so that you can see the issue I was referring to.

I'm a javascript and Greensock novice, so please be gentle. I'm trying to break these batches up into individual containers because the issue I'm running into is that if you follow a link to an anchor at the bottom of the page, you end up having to wait for all of the elements in the batch to animate before they reach your scroll position. Does that make sense? A pen is worth a thousand words, I suppose, so here's my attempt. Hit the button to be taken to the bottom, and then wait forever before the animation reaches the bottom. Maybe batch isn't the correct approach--I'm open to suggestions.

It's an old post, but new to me, and still very relevant. I do a little bit of light JS, but my strengths are definitely more in HTML/CSS. This post has given me the some motivation to improve my JS skills to the point where I no longer need to rely on taking found code snippits and bending them to suit my needs. Learning through building projects is a great approach, and what better way to learn JS than by building something fun like adding slick animation to my existing websites? In my experience, front-loading the learning process with some good courses/tutorial content can really speed things along. Does anyone have any recommendation for javascript courses? I'm willing to pay for quality content. It doesn't necessarily have to be GSAP-specific, but that would be a bonus as long as a solid foundation of javascript knowledge isn't a prerequisite.

Thank you so much for the recommendation, and also for the explanation of the problem.

I'm really tempted to sign up for Club Greensock just for the ScrollSmoother plugin. It looks fantastic, but I'm worried about accessibility issues. Our site requires very strict accessibility compliance (well, only WCAG AA, but it must be 100% compliant with that standard). My limited testing so far in codepen seems to show that keyboard navigation / tabbing through content and links seems to work pretty well, but CTRL+F to find (and jump to) content within a page does not. To illustrate the problem, you can take a look at the ScrollSmoother example, hit CTRL+F to search for the letter 'c'. It'll find a few, and going through the results will cycle through them, but the screen doesn't jump to each. Does anyone have any suggestions as to how to go about solving that problem, even in general terms, or if it's even likely that a solution is possible? I feel like venn diagram of people who make visually dramatic and exciting websites and people who must be very strict about web accessibility has very little overlap. Perhaps that overlapping section can be accurately labeled as "driven to madness".