Jump to content
Search Community

How to use Stagger with forEach Loop?

Alex J. test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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",


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