GSAP Layered pinning with 50vw sections

[Manitoba]

Hi !

 

I'm trying to work around the "Layered pinning" demos, to make it work with sections of 50 viewport width.

 

I made 4 sections. Each is divided in two blocks of 50 viewport.

Left and right blocks from the first section have a background color and a text.

The next 3 sections only have a background color and a text for the right block, leaving the left block empty and transparent.

 

What I'm expecting is that the left block of the first section doesn't move up and is always visible, as the right blocks overlap.

I'm struggling to understand how to make it work.

 

Kind regards.

See the Pen PorXmjQ by Onamor (@Onamor) on CodePen.

[mvaneijgen]

HTML and CSS are really important with GSAP, I've restructured your HTML, so that all slides are in the right column and then stacked them all right on top of each other with CSS. This logic comes from my post about how to create stacking card effects (yes even yours) and you can read about it below. This is in my option the best way to go about these kinds of effects, so be sure to check the post out. It will allow you to create any card stacking effect. 

 

 

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

Hope it helps and happy tweening! 

 

See the Pen xxomLqm?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

[Manitoba]

Thank you for your time!

 

I'll take a closer look as soon as I can, but the way you did it looks interesting. I'll test it out and come back.

In the meantime, i found a way to get the result I wanted with some HTML and CSS workaround.

 

Have a nice day!

[Rodrigo]

Hi,

 

Hopefully these demos can help:

See the Pen wvZqwyg by GreenSock (@GreenSock) on CodePen.

 

See the Pen xxmpQwP by GreenSock (@GreenSock) on CodePen.

 

Happy Tweening!

[Manitoba]

On 9/6/2024 at 3:09 PM, mvaneijgen said:

HTML and CSS are really important with GSAP, I've restructured your HTML, so that all slides are in the right column and then stacked them all right on top of each other with CSS. This logic comes from my post about how to create stacking card effects (yes even yours) and you can read about it below. This is in my option the best way to go about these kinds of effects, so be sure to check the post out. It will allow you to create any card stacking effect. 

 

 

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

Hope it helps and happy tweening! 

 

 

Hi !

 

Your solution is perfect, thank you for your help.

 

Have a nice day !