Jump to content

Victor Work

ScrollTrigger.batch() Help

Go to solution Solved by ZachSaucier,

Recommended Posts

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

Link to comment
Share on other sites

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 :)



  • Like 1
Link to comment
Share on other sites

  • Solution

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')

    .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') })


  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.