ScrollTrigger .batch and child animations

[acantoroBB 1 Likes (Newbie)]

Hello,

 

I have a question about Batch method in ScrollTrigger. I read the doc but I couldn't find where to animate child of current triggered element.

In my example I'd like to animate "name" and "gender" div of my batched div ".item".

Is there any method to make this ? I thought use gsap.utils.toArray, is it a good way ?

 

Thank you.

 

ScrollTrigger.batch(".item", {
  interval: .5,
  batchMax: 4,
  start: "top 75%",

  onEnter: batch => {

    //Instead of batch I'd like to animate children of triggered .item
    gsap.to(batch, {
      opacity: 1,
      scale: 1,
      duration: 1,
      ease: "power4.out",
      stagger: 0.25,
    });
  },
});

 

See the Pen NWdmxRr by bappla (@bappla) on CodePen

[Stefano Monteiro 10 Likes (Newbie)]

I have never used this yet. But it seems that you just need to create another batch and call those elements. Here is a forked pen with animating the name

 

See the Pen LYxvLMm by stefanomonteiro (@stefanomonteiro) on CodePen

[acantoroBB 1 Likes (Newbie)]

Thank you, I didn't suppose this option would works.

 

EDIT: Here is a exemple I found using .toArray() and .forEach()

See the Pen GRjWxaJ?editors=0010 by GreenSock (@GreenSock) on CodePen

[GreenSock 16,252 Likes (Superhero)]

Here is a more succinct and performant way of doing it: 

See the Pen GRjWxaJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Happy tweening!

[Urs 2 Likes (Newbie)]

On 5/1/2021 at 12:58 AM, GreenSock said:

Here is a more succinct and performant way of doing it: 

 

 

 

Happy tweening!

 

Quick question: Is it possible to have different animations for the different children of the batch item?

[OSUblake 18,332 Likes (Superhero)]

Hi Urs,

 

You can have different animations, but you'll need to figure what is what in the batch callback. 

[Urs 2 Likes (Newbie)]

Hi OSUblake,

Thank you for your response. I thought so, but I didn't figure out how to do it. Can I have a timeline inside a batch? I don't think so. 

Do you know where I can find an example of this or would you be so kind and give me a little hint?

Best, Urs

[OSUblake 18,332 Likes (Superhero)]

Sure, you can have a timeline. You can do whatever you want in the callback, but I don't know how to advise because I'm not sure what you are trying to do. A minimal demo would go a long way in being able to give you a better answer. Thanks!

[Urs 2 Likes (Newbie)]

I kinda managed to do it, but I'm wondering if there's a easier way... 

 

See the Pen MWEMXOv by uimhof (@uimhof) on CodePen

 

 

[OSUblake 18,332 Likes (Superhero)]

4 hours ago, Urs said:

I kinda managed to do it, but I'm wondering if there's a easier way... 

 

That's exactly what I would have done. 😉

 

[Urs 2 Likes (Newbie)]

On 1/21/2022 at 5:51 PM, OSUblake said:

 

That's exactly what I would have done. 😉

 

Good to know, Thanks. I'm very new to GSAP and have a lot to learn...  😉