GSAP ScrollTrigger animations not firing in for each loop

[Tony Geek]

Hi all,

I know this topic has been drummed to death but I simply can't get my solution to work.

I'm creating an animation within a ScrollTrigger, where each box that comes into view grows in height and reveals it's content.

 

I've tried looping through each element as multiple other threads have suggested, but I just can't get it to work. All of the blocks animate in sync at the same time which is not what I'm looking for. I'm looking to have them animate as they pass onto the screen or when they're something like 50% within the viewport.

 

Any help would be greatly appreciated.

See the Pen vEBORqL by tonycre8-the-bold (@tonycre8-the-bold) on CodePen.

[mvaneijgen]

You can set containerAnimation to the horizontal animation ScrollTrigger, so that the sub ScrollTriggers behave horizontally. Y

 

our first tween on the card timeline animates .from() 1vh which it already seems to be, so this tween does nothing, I've removed it for now.

 

Then instead of top bottom, you use left right in the start and end triggers. I've set the browser makers to the center, but may you want to look in to having custom start and end triggers for each card, because the first card is already done when the scroll starts and there isn't enough space for the last card, but this is the logic. 

 

Hope it helps and happy tweening! 

 

See the Pen wBwaXLv?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Tony Geek]

20 hours ago, mvaneijgen said:

You can set containerAnimation to the horizontal animation ScrollTrigger, so that the sub ScrollTriggers behave horizontally. Y

 

our first tween on the card timeline animates .from() 1vh which it already seems to be, so this tween does nothing, I've removed it for now.

 

Then instead of top bottom, you use left right in the start and end triggers. I've set the browser makers to the center, but may you want to look in to having custom start and end triggers for each card, because the first card is already done when the scroll starts and there isn't enough space for the last card, but this is the logic. 

 

Hope it helps and happy tweening! 

 

 

 

Exactly what I needed! Thanks a lot. I had seen those horizontal start & end-points but didn't know how to get them like that. Much appreciated 😁