Staggered Animations in ScrollTrigger

[Yannis Yannakopoulos 46 Likes (Newbie)]

Hello and first off congrats on the the release of ScrollTrigger, it's definitely a game changer! 

 

Are there any plans for adding stagger in ScrollTrigger? Would be really useful for reveals on a grid, where you'd want to stagger the reveal of each element when entering the viewport. 

[ZachSaucier 7,130 Likes (Superhero)]

Hey Yannis, welcome to the forums  

 

Thanks for asking about this. We considered adding this functionality to ScrollTrigger but didn't add it yet because we weren't sure if it was worth the kb. Perhaps if there is significant interest in this feature built in support can be added. 

 

As a side note, this sort of thing is possible using just the intersection observer API + GSAP.

[Yannis Yannakopoulos 46 Likes (Newbie)]

Thank you for the clarification Zach. Personally i feel would be better to wrap everything scroll-related around ScrollTrigger, instead of having another component for the stagger-reveal-effects, using IntersectionObserver. But i do get the extra kb concern. Maybe an optional plugin of the plugin? 🙂

 

In any case let's see if anyone else is interested and hopefully it could be included in a future release.

[Sygol 2 Likes (Newbie)]

Hey guys,

 

I'm just checking ScrollTrigger and I love it! It is way better than Intersection Observer.

I would definitely be interested in feature that Yannis came up with  

[ddi-web-team 19 Likes (Newbie)]

I'd be interested in stagger for scroll trigger. Good suggestion Yannis.

[GreenSock 18,251 Likes (Superhero)]

@ddi-web-team @Sygol @Yannis Yannakopoulos I whipped together a helper function that should make this quite easy. Check it out in this CodePen: 

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

 

We may end up adding it as a static method on ScrollTrigger if there's enough interest. What do you think? 

[mikel 4,774 Likes (Superhero)]

7 hours ago, GreenSock said:

We may end up adding it as a static method on ScrollTrigger if there's enough interest. What do you think? 

 

Great. Just do it.

[Yannis Yannakopoulos 46 Likes (Newbie)]

That's just great Jack!

 

One question is, would we still be able to pass an object or a function to the stagger property, in order to have more control over the reveal effect's order? Or would this need to be passed somehow in the batchCallbacks method? 

[GreenSock 18,251 Likes (Superhero)]

Sure the whole point of the batchCallbacks() is that it'll feed an Array of the appropriate elements to your callback(s) so that you can do whatever you want with them (like animate them with a stagger). It's totally up to you. Feel free to use an advanced stagger or whatever you want. Did you peek at the demo? Notice there are simple gsap.to() for the enter animations, and gsap.set() for the leave ones. Tweak those tweens however you want. 

 

Does that answer your question? 

[Yannis Yannakopoulos 46 Likes (Newbie)]

Didn't run through the code of the demo, but totally makes sense now. Perfection all the way! Ship it! 😀

[GreenSock 18,251 Likes (Superhero)]

Wish granted: 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

[Yannis Yannakopoulos 46 Likes (Newbie)]

Many thanks Jack! It's a great addition, i'm sure lots of people will find this super useful 🙂

[BMateus 6 Likes (Newbie)]

This is amazing! Simple and brilliant! Great work.

[Black Ducas 8 Likes (Newbie)]

@GreenSock Thanks! How can I make it to animates the elements just once?

With the following code: scrolling down it animates the cards as expected, then I scroll back to top page and scroll down again and it animates the elements again. I'd like to not animate them again.

 

  ScrollTrigger.batch(".cards", {
    onEnter: elements => {
      gsap.from(elements, {
        autoAlpha: 0,
        y: 60,
        stagger: 0.15
      });
    },
  });

 

[Cassie 5,122 Likes (Superhero)]

let count = 0

ScrollTrigger.batch(".cards", {
    onEnter: elements => {
      if (count > 0) {
        gsap.from(elements, {
         autoAlpha: 0,
         y: 60,
         stagger: 0.15
        });
        
        count++
      }
    },
  });

It's currently animating onEnter, which fires *every* time it enters - But you could add a count?

[akapowl 5,135 Likes (Superhero)]

 

You could also use once: true, if I am not mistaken.

 

See the Pen e26c8669cb90500b27e682f32259fb0a by akapowl (@akapowl) on CodePen

[Justice 2 Likes (Newbie)]

Yes! The batch() method is totally worth it. Many thanks GreenSock Team.