Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
acantoroBB

ScrollTrigger .batch and child animations

Go to solution Solved by Stefano Monteiro,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 1
Link to comment
Share on other sites

  • 8 months later...
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?

Link to comment
Share on other sites

Hi Urs,

 

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

 

 

  • Like 1
Link to comment
Share on other sites

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. 😉

 

Link to comment
Share on other sites

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...  😉

  • Like 1
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.
×