Scrolltrigger + Glitchy Stepped Animation

[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

[Rodrigo]

Hi,

 

Unfortunately I'm having a few issues trying to follow exactly what's going on in your code, especially in the stepsTimeline update method.

 

Instead I created this example that shows what IMHO is a simpler way to achieve this:

See the Pen jOQEYqX by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[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" } }, "<")
              

 

[Rodrigo]

Hi,

 

Regardless of how many frames and slides the whole animation has, the set() method approach plus the use of the position parameter, should provide a good starting point.

1 hour ago, btbt said:

So they can't coordinate with each other 1:1. Would I create two different timelines?

Nope, I would stick with just one timeline with it's own ScrollTrigger config, the simpler the better  All you have to do is just setup the different frames and when it corresponds, add the slide change with the frame change (this changing the last frame of the current slide with the first frame of the next slide). This most likely should be a nested loop structure:

const slides = [
  {
    id: "slideOne",
    frames: [
      {},
      {},
      {},
      {},
    ],
  },
  {
    id: "slideTwo",
    frames: [
      {},
      {},
    ],
  },
];

All you have to do is create some nested loops:

const tl = gsap.timeline({
  scrollTrigger: {
    // ScrollTrigger Config Here
  },
});

slide.forEach((slide, i) => {
  // add this slide to the timeline
  if (slides[i + 1]){
    tl.set(slide, {/*...*/});
    slide.frames.forEach((frame, index) => {
      // loop through the frames here using the same pattern
    });
  }
});

Hopefully this helps.

Happy Tweening!