How to use Stagger with forEach Loop?

[Alex J.]

Hey there Awesome People! 

 

I am trying those fancy mask image animations and is stuck in a situation where I'd like to use Stagger with forEach loop or something which will allow me to add delay between each item in the loop. 

 

As you can see in the Codepen Demo, I am using a container (reveal) and there is an image inside of it. I am working on both these elements, that's why had to use forEach. 

 

Available Solutions Found and reasons for not using them:

- Using Query Selector to Find all the elements with same class - I don't think this would work since we have mask animations and is working with 2 DIVs at the same time. 

- Using batch() Function: Though batch seems like the perfect fit here, but if we consider a long list of elements on the page and the users scrolls drastically, then there would be some delay based on the sequence of animations which hinder the UX. 

- Passing variable to forEach and adding delay based off it: Not gonna help since I don't want the second animation to occur as soon as the first one gets completed, I'd like to add a short delay instead (probably like 0.3 seconds). 

 

Any help would be much appreciated. 

Thank You ) 

See the Pen bGoGqgV by alexjain (@alexjain) on CodePen

[PointC]

I'd probably use batch, but you could use the index of the loop to set a small delay too.

 

revealContainers.forEach((container, i) => {
  let image = container.querySelector("img");
  let tl = gsap.timeline({
    delay: i * 0.3,
    scrollTrigger: {
      trigger: container,
      start: "top 120%",
      toggleActions: "play none none reverse",
    }
  });
  ...

 

[OSUblake]

I guess you could create your own version of batch.

 

See the Pen abLbWZx by GreenSock (@GreenSock) on CodePen