btbt

I love simplifying it and this is so much smoother. Only thing, the animation has like 18 frames and we only have 5-7 li slides. So they can't coordinate with each other 1:1. Would I create two different timelines? In my first post code, I have it to where we have an array of images (frames) to scroll through. Then I set the two ul li's styling to correspond to progress through the section. How can I toggle the classes of the current li? I've tried these two methods but not working: .set(listItems[i], { css: { className: "-=active" } }, "<")

I've been working on this on and off for a few months and am really stuck on making this run smoothly. I'd love to make this look, run, and feel "finished". What's supposed to happen: Basically, it's a large 100vh-ish section that cycles through 3 separate components as you scroll down. There's a UL with copy and another UL of dots to show which "slide" you're on. On the right-hand side is going to be animation cycling through frames. I replaced everything here for simplify things for problem solving. What is happening instead: The right-hand side frames animation is fine! The UL with copy glitches sometimes where different LI are showing on top of each other. It should only show one at a time. There's no fading/moving up animation with the copy. I really am stumped at how to accomplish this- when I tried with toggling classes, it didn't get things working well. Is there a simple way without rewriting a lot of this? As for the glitchiness, I'm really stumped. I really need any guidance.