btbt
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by btbt
-
-
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.
See the Pen bGmmXLP by paulineorr (@paulineorr) on CodePen
Scrolltrigger + Glitchy Stepped Animation
in GSAP
Posted
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" } }, "<")