PInned section in a pinned section not work

[MatteoNet]

Hello everyone! i have this problem, as you see in the codepen, i have a first pinned section that scrolls down showing images, followed by a second section with horizontal scroll, and i'm trying to create a curtain type animation, on the first section,

Let me explain better I would like the first section to finish the animation of the movement of the images, scrolling reduces and makes the section below appear blocking the general wrapper, but the pins of the two sections conflict and the height of the section is calculated double, do you have any advice on this?

(Ps. are there Italians in this forum?)

See the Pen PoyQdge by MatteoNet (@MatteoNet) on CodePen

[Cassie]

Hiya!

• The first animation could be a timeline instead of three tweens.
• You can't pin a section and also animate a parent on the y axis at the same time - that's going to mess up calculations
• Maybe you're looking for pinSpacing for the "curtain" effect?
• A little note -  transforms are more performant to animate than layout properties like left/right etc

See the Pen YzJegKd?editors=1010 by GreenSock (@GreenSock) on CodePen

Hope this helps, 🍕 mi scusi, non parlo italiano 🇮🇹

[MatteoNet]

I Thank you very much for the answer, I would like to first complete the animation of the first section "hero-section-container", then make the images open completely and then start the curtain animation which makes the first section collapse while blocking the whole external container of the two sections.

For the first version of code i have, use the propriety of transform, but, responsive is a big problem

[MatteoNet]

My goal would be to replicate the same effect as in the image below, where the first section shrinks, and makes the one below appear, (this image is from my work, but in this case I can't replicate the effect having a first section that has a pin)
 

[Cassie]

Maybe something like this?

See the Pen RweMpeV?editors=0010 by GreenSock (@GreenSock) on CodePen

[MatteoNet]

Thank you very much for the answer, you turned my day around,
 

// Imposto il Maxwidht in base al numero di slide
let netPanel = document.getElementsByClassName("net-panel");
$("#net-panels-container").attr("style", "width:" + netPanel.length + "00%");

The horizontal slider is a dynamic element in php, which allows me to create these sections dynamically, and I seemed to understand that it should give a max width to "net-panels-container" 100% plus for each elements.


now I tried to implement the code you provided, but the horizontal slider already starts its animation when you scroll the first container, why?

[Cassie]

Sure thing! I don't know where php is coming into this really. Unless the container is being injected after page load, in which case you may need to call ScrollTrigger.refresh() after the DOM is all finished loading?

 

I can't really help more without seeing a minimal demo showing the issue

[MatteoNet]

My php code only generates elements dynamically, which are created before loading the page, however even in your example provided if, let's put the browser at full size, the horizontal carousel starts its animation already from the first scroll of the first section

[Cassie]

If it isn't starting exactly where you need, have a go at changing the values. Maybe something like this.

 

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

[MatteoNet]

Thank you very much for the great help you have given me! you're great!" you helped a little beginner !! could you explain where I was wrong ? even just the topic then I'll look for more information.

One last question, if I wanted to insert an absolute div (above the horizontal scroll section) that changes its opacity within the first element of the horizontal section, which parameter should I use to start the animation? its container? or a variable parameter?

Thanks again for the help!

If you come to Italy you will have a pizza as a gift! 😁