ScrollTrigger.batch() Help

[Victor Work]

Hey Guys,
I'm getting a weird behavior (probably in my end) using ScrollTrigger.batch() as you can see on the pen attached (you may need to open Codepen's link), when you scroll it the animation get scrambled and doesn't run in the right order.

What's exactly am I doing wrong here?

Thanks in advance.

 

See the Pen qBqqzqb by victorwork (@victorwork) on CodePen

[tailbreezy]

I though that changing the stagger to a lesser value did help, but if you scroll too fast you get the same issue you mentioned.

So it helps only because you are not revealing new items too fast.

 

Somehow, the new items that are scrolled to pass to the front of the queue

 

 

[ZachSaucier]

The core of the issue is that depending on how a user scrolls some elements are batched in different groups. If you're scrolling and at least two elements are batched together, then your long stagger gets applied. But if a third element is scrolled to before that time, it looks like it's appearing out of order.

 

As tailbreezy said, a shorter stagger is one way to make them appear in a more correct order. Another alternative would be to use different batch interval so your items are grouped in a way that you want them to be. It might take some playing around with the values to get the effect that you want.

 

Additionally I recommend using an actual timeline to sequence tweens:

onEnter: (elements) => {
  const holds = $(elements).find('.items__hold')

  gsap.timeline()
    .to(elements, { duration: 2, '--widthline': '100%', ease: 'expo.inOut', stagger: .25 })
    .to(holds, { duration: 1.5, y: 0, stagger: 0.5, ease: 'expo.out' }, 0.5)
    .to(holds, { duration: 1, opacity: 1, ease: 'none' }, 0.5)
    .add(() => { holds.css('pointer-events', 'auto') })
}

 

[Victor Work]

Thanks @ZachSaucier, very well explained. 😊