ScrollTrigger.batch() firing other elements that are not in viewport

[seanpa98]

I have a ScrollTrigger.batch() for all ".split-text" elements that should trigger a stagger animation when each one enters the viewport.
My problem is that the first ".split-text" that enters the viewport triggers the animation for the rest of that kind as well instead of animating each only when they enter the viewport.

The code for that start at line 26 of the JS. I use the same/very similar ScrollTrigger.batch() for the images as well and that code works perfectly fine, just as intended. I really don't know what I'm doing wrong...
 

See the Pen jOYawZE by deekoul (@deekoul) on CodePen

Edited April 2, 2022 by seanpa98
Updated codepen

[Cassie]

Hey Sean, welcome to the GSAP forums.

 

1 hour ago, seanpa98 said:

I hope you don't mind the rather bloated codepen. I was too lazy and time constrained to make a minimal version.

Just to gently flip this the other way - How would you feel about taking time out of your Saturday to help someone who said they were 'too lazy' to set up an example for you?

 

The guidelines exist for a reason, the time that you're saving by putting all the code in this demo is just handed off to the volunteers in this forum who have to put more time in to understand the question and code involved.

[seanpa98]

37 minutes ago, Cassie said:

Hey Sean, welcome to the GSAP forums.

 

Just to gently flip this the other way - How would you feel about taking time out of your Saturday to help someone who said they were 'too lazy' to set up an example for you?

 

The guidelines exist for a reason, the time that you're saving by putting all the code in this demo is just handed off to the volunteers in this forum who have to put more time in to understand the question and code involved.

You are right, I updated the codepen to a minimal version. I hope that someone can offer some support with that.

[Cassie]

Amazing, thank you so much Sean. Hugely appreciated.

I'll take a look now!

[Cassie]

Ah ok!

 

So this is just a scoping issue. You're grabbing all the lines and storing them in splitTextLines and then onEnter you're telling GSAP to animate them all in. You're not explaining that you only want to animate the lines from that section.

 

const splitTexts = gsap.utils.toArray( ".split-text" );
// defining a global variable
const splitTextLines = gsap.utils.toArray( ".split-text .line" );

gsap.set(splitTextLines, {
  yPercent: 100,
});

ScrollTrigger.batch(splitTexts, {
  start: "top 70%",
  onEnter: (splitText) =>
  // on enter - animating ALL the lines stored in your global var
  gsap.to(splitTextLines, {
    duration: 0.4,
    yPercent: 0,
    ease: "custom",
    stagger: 0.15,
  }),
});

I personally wouldn't approach the images or split lines with batch in this case,

Batch is great if you have an unknown number of elements all coming into into the viewport at once and you need to coordinate the animation. As you have them coming in one by one, it seems to me that you just want to stagger the text and images in when the block enters the viewport?

If so here's how I'd approach it.
 

// get all the blocks
const blocks = gsap.utils.toArray( ".block" );

// loop around each block
blocks.forEach((block) => {
  // get the lines scoped to this block
  const splitTextLines = block.querySelectorAll( ".split-text .line" );
  // and the image
  const image = block.querySelectorAll( "img" );
  
  // set up a scrollTriggered timeline
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: block,
      start: "top 70%",
      markers: true
    }
  })
  tl.from(image, {
    duration: 1.2,
    autoAlpha: 0,
    y: 32,
    ease: Power3.in,
  })
  .from(splitTextLines, {
    duration: 0.4,
    yPercent: 100,
    ease: "custom",
    stagger: 0.15,
  },0)
})

 

See the Pen zYpPEVr?editors=1010 by GreenSock (@GreenSock) on CodePen

Hope this helps!

[seanpa98]

Great, thanks so much for the fast help and great inputting that on a Saturday! I will adjust my code. Have a nice weekend!