Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Yannis Yannakopoulos

Staggered Animations in ScrollTrigger

Recommended Posts

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. 

  • Like 3

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

@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? 

  • Like 8

Share this post


Link to post
Share on other sites
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.

  • Like 1

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites

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? 

  • Like 4

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 1
  • Thanks 1

Share this post


Link to post
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.

×