Pin vertical sections with inside horizontal scrooltriggers

[lagalga]

Hi, I am trying to create a group of sections within which there is a horizontal scroll, and when it ends then another new section appears vertically that overlaps.
But if I use sticky it only works the first time?
I'm doing it in wordpress(Divi), but with a simple demo based on @LukasZahorec' I don't get it... should I create a tween above the horizontal scroll sections for the vertical sticky behavior?

 

 

WP: ( https://temp.espaciotramo.com/loop-plato-prueba/ )

 

See the Pen abXgwvJ by lagalga (@lagalga) on CodePen

[mvaneijgen]

When working with ScrollTrigger and when you want to pin something it is best to use ScrollTrigger for this using its pin property. ScrollTrigger needs to modify the layout to do its effect so mixing in position: sticky is not possible same as position: fixed.

 

There is a lot going on in your demo if you could reduce it to just the relevant parts I would be happy to take a look, but removing position: sticky from your css and using an extra ScrollTrigger with pin: true to the correct elements will be the solution.

 

Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

Are you trying to achieve something like this:

See the Pen dyQBdxq by GreenSock (@GreenSock) on CodePen

 

This demo uses the same approach but with Container Animation:

See the Pen zYyOpQX by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[lagalga]

Hi! sorry i've been out and im' seein again now. Gonna try first one, @Rodrigo and simplify my codepen, @mvaneijgen.

I'll post it today or tomorrow
Thank you