Stagger through loop with ScrollMagic

[fpalla]

Hey guys, noob here.

This might be a fairly simple problem and I've tried to look it up in the past forums but at this point I think I don't have the technical lexical ability to use the correct terms.

 

I'm trying to stagger an animation that comes from a list of classes, triggered via ScrollMagic.

As in the example, the red divs animate when in view.

 

I'd like to have them staggered, by what's visible. I think I see the problem, but I don't know how to solve it.

Meaning I need to apply the stagger property in a different way, given that currently "each" element stands by itself. (might be wrong here)

 

Thank you so much,

have a great day!

See the Pen yLOJGNJ by fvalla (@fvalla) on CodePen

[PointC]

Hi @fpalla

 

ScrollMagic is not a GreenSock product and not supported on the forum.

 

ScrollTrigger is GreenSock's product which does everything SM does and whole lot more.

If I understand your specific question correctly, I think you'd want to look at the .batch() method of ScrollTrigger.

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

 

Happy tweening.

 

[akapowl]

Hey @fpalla

 

You definitely mean ScrollTrigger, not ScrollMagic  ...ScrollMagic is not a Greensock product - the ScrollTrigger you are using, is though.

 

Is this what you are after?

 

See the Pen 4bf05bb3fac366ab49dbbc6ebab671f0 by akapowl (@akapowl) on CodePen

 

I just simply added the stagger like so:

 

ScrollTrigger.batch(".p-img", {
  
  onEnter: batch => gsap.from(batch, .9, { ease: Power3.easeOut, width: "0", stagger: 0.3 })
  
});

 

 

[fpalla]

Oh boy, first, sorry. About the plugin mess. Second, was I dumb haha.

With scrollTrigger, WAY easier.

 

Again, sorry and thanks!

[akapowl]

That escalated quickly.... first @PointC beat me with his answer by seconds (again) and then you found the way I suggested yourself right after my post.

 

Awesome, you got it working