Jump to content
Search Community

Staggered Animations in ScrollTrigger

Yannis Yannakopoulos test
Moderator Tag

Recommended Posts

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 3
Link to comment
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
Link to comment
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 10
  • Thanks 2
Link to comment
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 5
Link to comment
Share on other sites

  • 1 month later...
  • 1 year later...

@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
      });
    },
  });

 

  • Like 1
Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

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.
×
×
  • Create New...