Mathijs07 Posted October 26, 2020 Share Posted October 26, 2020 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 More sharing options...
Shaun Gorneau Posted October 26, 2020 Share Posted October 26, 2020 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. 3 Link to comment Share on other sites More sharing options...
mikel Posted October 26, 2020 Share Posted October 26, 2020 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 3 Link to comment Share on other sites More sharing options...
Mathijs07 Posted October 26, 2020 Author Share Posted October 26, 2020 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 More sharing options...
ZachSaucier Posted October 26, 2020 Share Posted October 26, 2020 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 2 Link to comment Share on other sites More sharing options...
Solution mikel Posted October 26, 2020 Solution Share Posted October 26, 2020 ... or you could use this option See the Pen OJXpojK?editors=1010 by mikeK (@mikeK) on CodePen Happy batching ... Mikel 2 Link to comment Share on other sites More sharing options...
Mathijs07 Posted October 26, 2020 Author Share Posted October 26, 2020 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now