Cant apply stagger

[javierh]

Hi.

I´ve pick this gsap code around, modified some things, but cant find how to stagger this images.

Is there something im doing wrong?, any readings for this?

Thanks

See the Pen KwPjjzz by javier-herrera-the-selector (@javier-herrera-the-selector) on CodePen.

[mvaneijgen]

You're doing a forEach loop, which gets you one item each loop and you can't really stagger one item. If you want to stagger you have to give GSAP an array of all your elements and then it will stagger them in one by one. 

 

I've totally revamped your setup how I would make it and what I feel is the most intuitive way to work with the tools. I've moved to a timeline and put your ScrollTrigger on that timeline. Timelines are great when you want things to happen in sequence, even if you want things to happen at the same time it is great using the position parameter. It seems like you want your animation to only happens once? That is where once: true comes in check out the docs for more info https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#once I highly recommend giving the docs a once over, sounds boring I know, but you'll be surprised how much features are already in the tools that you didn't even know you needed! 

 

I've installed GSDevTools a premium plugin you can use for free on Codepen! Super handy tool to debug animations. Also don't forget the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  

 

Hope it helps and happy tweening! 

 

See the Pen xbKooJa?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

[javierh]

Hi, thanks!

Very useful reads and video on position parameter.

I´d use the animation happend not once, but in every Div i need containg images, maybe 3 more divs.

I must add forEach again do i?

 

[mvaneijgen]

 

11 hours ago, javierh said:

use the animation happend not once

Oh I was confused about this line in your setup onLeaveBack: self => self.disable() seems like you want to disable the ScrollTrigger

 

11 hours ago, javierh said:

, but in every Div i need containg images

I would then select an element that contains all your images, per section and use that as the for each loop. You can then use selector utils function to scope your queries to the current let say .disparatrig, this then gets you only the images in the current element. Then you just have the wrap all the code animation code in that for each and for each . disparatrig element it will create your animation on the page. 

 

Hope it helps and happy tweening! 

 

See the Pen LEPwZKa?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

[javierh]

Great!, thank you, understand what you did, and thanks for the starting readings.