Stagger Animation: Loop Through Columns

[Banddev]

I want to reveal each column with a stagger effect, each column should fade in when they appear in the viewport using scrolltrigger. 

 

but it seems that I am doing something wrong because the 2 columns on the same row, fade in at the same time, with no delay between each other.

 

how can I ensure that each column reveals with a different delay and create a staggered effect?

is this wrong? did I misunderstand the work of "stagger"?  😥

 

    const anims = gsap.utils.toArray('.img-container');

    anims.forEach((anim) => {
      gsap.set(anim, { y: 40, opacity: 0});

      ScrollTrigger.create({
        trigger: anim.parentElement,
        start: 'top bottom-=100',
        end: () => `+=${anim.clientHeight }`,
        markers: true,
        onEnter: () => {
          gsap.to(anim, {y: 0, opacity: 1, duration: 0.6, stagger:1});
        },
      })
    });

thanks



 

See the Pen GRBMKmE?editors=1010 by mp1985 (@mp1985) on CodePen

[Rodrigo]

Hi,

 

This is the perfect scenario for ScrollTrigger Batch:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

Here is a fork of your codepen:

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

 

Hopefully this helps. Let us know if you have more questions.
Happy Tweening!