Layered pinning from bottom with 80% height sections

[SebT]

Hi everyone, 

 

I'm trying to reproduce the following scroll animation on sections

This is very close to the "Layered Pinning From Bottom" example given in the ScrollTrigger documentation but with 80% height sections + scale animation. I thought it would be easy to achieve by inspiring myself with the documentation example.

 

Surprisingly, it has now been more than 2 days that I'm struggling with this animation without being successful.

 

Before asking for your help, I've done research and tried many different way of doing it.

Among all the numerous attempts I made, the closest to the expected result is the following

 

It "more or less" works - but it does not look good as in my reference...

I found the stagger setting by manual iterations, which is always a hint that we're not on the right path
Plus, my animation is presenting a kind of parallax effect when sections are animating concurrently which is not present in the animation of my web reference.
And finally, I do not know how to add a scale animation on the child img tags that each section includes...

 

If someone could help on this, that would be very much appreciated,

 

Best regards,

 

Sebastien

 

 

 

See the Pen VwmZggv by sebastienthiriet (@sebastienthiriet) on CodePen

[ZachSaucier]

Hey SebT. I think the demo that you're basing your approach off of lead you down a road that is non-optimal for the effect that you're wanting to create. 

 

Really what's happening on that site is only the background image is pinned. And really you can just scale and transform it, no actual pinning necessary. The rest of the section is normal content. 

 

With that in mind, here's how I'd approach it. It's actually pretty simple

See the Pen JjbPQyX?editors=0100 by GreenSock (@GreenSock) on CodePen

[SebT]

Hey Zach

 

Indeed, it was much simpler that what I was trying to do !!!
I was blind and obnubilated by the ScrollTrigger documentation example.

 

Thank you so much for your help.

 

Best regards