Jump to content
GreenSock

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

Animate all elements with a specific class using ScrollTrigger with stagger

Go to solution Solved by mikel,

Recommended Posts

have searched the forum but sadly haven't found the post that solved this for me. Basically I want to have a class that I can give to any element on my website which will make it appear on scroll. This part works.

 

When elements with that class appear at the same time I want them to stagger. For some reason I can't get a version working where both these things work.

 

I've tried a bunch of versions but made a Codepen for the version that I believe to be closest to what I want. Hopefully someone can help me achieve this effect. Should anything be unclear please let me know!

See the Pen rNLyJQb by MathijsLemmers (@MathijsLemmers) on CodePen

Link to comment
Share on other sites

The problem (as it appears to me) is that you are calling stagger on each individual '.box' ( within the forEach ) rather than on any array of matches. 

  • Like 3
Link to comment
Share on other sites

44 minutes ago, Mathijs07 said:

When elements with that class appear at the same time I want them to stagger.

 

You could use ScrollTrigger.batch()

 

Happy batching ...

Mikel

  • Like 3
Link to comment
Share on other sites

Thank you both for the quick response!

 

@Shaun Gorneau I understand what you mean, that is definitely the problem 😅

 

@mikel I'm pretty sure .batch() is the way to go, but I just can't seem to get it to work easily. As far as I can see when using .batch() you can't use toggleActions but are instead forced to use onEnter, onLeave, onEnterBack and onLeaveBack.

Also, when using fromTo the from doesn't seem to be applied on load of the script.

Is there a way to use .batch() while also keeping the code clean like in my example?

Link to comment
Share on other sites

1 hour ago, Mathijs07 said:

when using fromTo the from doesn't seem to be applied on load of the script.

So use a .set() and .to() :) 

 

I'd set it up like this:

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

  • Like 2
Link to comment
Share on other sites

Ah that's it. Thank you both.

 

.set() is something I totally missed for some reason.

Also, I realise this code is an example from the documentation but for some reason when I tried to implement it it just didn't seem to work...

 

Thanks for the help!

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