ScrollMagic / GSAP / Animate one by one

[Androlax]

Hello,

 

I have a little problem, I can't figure out how to fix it. It seems to be pretty simple, but I don't find how to do it.

 

I would like to, when I come on a line of ".post" element, I would like the .post element to be animate ONE BY ONE, and not all at the same time, I searched on internet, tryed some things, but I couldn't figure out how to do it.

 

Here is a codepen to show you an example :

 

 

Thanks for your help.

See the Pen KKPrMwx by th-o-benoit (@th-o-benoit) on CodePen

[ZachSaucier]

Hey Androlax and welcome to the forums! 

 

I think this thread can really help you:

 

[Androlax]

Hey,

 

Thanks you

 

Yes, I saw this post, but I would like to make it with ScrollMagic (is this even possible ?)

 

Thanks a lot

[ZachSaucier]

It probably is. My guess is that you'd have to know (or calculate) which are being shown and then stagger them in. Maybe have a timeline for each row and play that timeline?

 

ScrollMagic isn't a GreenSock product and I don't know much about it so I can't really help you there  

[Androlax]

Oh yes I see, (I thinked also to do it by row, but with flex/grid, I don't know how much rows there is ^^)

 

Thanks you for your help ^^

[PointC]

You'll need to check the distance from the top for each element and figure out how many rows you have. Then you can create a scene for each row and stagger the targets. You'll use a global trigger element, but set an offset for each row. Here's a demo from a different thread, but shows the technique.

 

See the Pen aeJxJE by PointC (@PointC) on CodePen

 

This is not responsive. You'll need to make adjustments and listen for a resize event if that's a requirement for your project, but it should get you started. Happy tweening.

 

[Androlax]

Thanks you @PointC, I understand well now (not really a good way to do it with ScrollMagic sadly aha)