ScrollTrigger with different trigger on the first section

[Louienator]

Hello GSAP friends. I'm trying to achieve this type of scrollTrigger animation that the first trigger is different from the rest.

Here's  my fiddle:
https://jsfiddle.net/9y8haugd/249/

[Louienator]

I think i got it. but it seems that the scroll trigger on the other section didn't work.  And also, why does my square when expand is like trapezoid?

Here's my fiddle:
https://jsfiddle.net/58jo76rs/48/

[mvaneijgen]

Console.log() is your friend! Instead of thinking you've setup everything 100% perfect, log the values you're using and check if they are correct with what you're thinking they are. You've used regularSection as your trigger which will only use the element as the trigger and as soon as it would trigger it would show all the images below it. In your case you use a forEach() look and have defined 'zap' all the current item, so that is what you want to use for the trigger. 

 

https://jsfiddle.net/obf4cam5/