MatteoNet

i have found this example, is the right way to have a result https://codepen.io/GreenSock/pen/XWXdGaw/9e7bf431223f98516c0431cfdefb6e3f

I fixed the html code, do you have any advice on how to reduce the height of the pinned section, to reduce it together with the last element?

The contents of collapsed elements are not collapsed together with the container, my goal is to shrink the title and make the other elements disappear on container shrink, I apologize for my english I have tried to give in css, overflow hidden, for deduce pin height i hav to set with gsap do reduce height?

Thank you all again for your availability, for now I've managed to get this result, managing to resize the elements and keep them fixed, but I don't understand how to intervene on the content of the elements that remain visible, do you have any ideas? or examples you can study? Thanks always to everyone https://codepen.io/MatteoNet/pen/WNYvVvd

Hi ! I would like a hand to start developing this section, I would be immensely grateful to you because I can't get out of it, I have these sections and I would like scrolling to pin the #tg-course section and each , tg-panel reduce its height up to 100px and only the title remains with reduced font size, could you help me with some ideas? A thousand thanks

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! ?

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

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?

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)

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

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?)

I have a section, which contains 5 images, initially they are all overlapping centered, when scrolling they move towards the edges of the container, after this i have a horizontal scroll section and i wold have below this section i have horizontal scroll section, my ultimate goal is to, 1) Animate the images of the first section 2)Finish the animations of the first segment, remove the pin and its height 3) block both sections and obtain a reduction of the first section while the one below appears from below the previous one 4) start the animation of the horizontal section. is this the correct way to declare my code? (sorry for my english but it's not my language) gsap.to(".hero-img-1", { scrollTrigger: { trigger: ".many-image-move-trigger", start: "bottom bottom", end: "100%", scrub: 1, }, left: 44, top: 118, width: 391, height: 249, }); gsap.to(".hero-img-2", { scrollTrigger: { trigger: ".many-image-move-trigger", start: "bottom bottom", end: "100%", scrub: 1, }, left: "50%", top: 89, xPercent: -50, // per centrare orizzontalmente width: 312, height: 120, }); gsap.to(".hero-img-3", { scrollTrigger: { trigger: ".many-image-move-trigger", start: "bottom bottom", end: "100%", scrub: 1, }, right: 44, top: 44, width: 316, height: 464, }); gsap.to(".hero-img-4", { scrollTrigger: { trigger: ".many-image-move-trigger", start: "bottom bottom", end: "100%", scrub: 1, }, left: 352, bottom: 44, width: 468, height: 316, }); const heroReduce = () => { console.log("Ciao l'animazione è finita"); gsap.to(".img-hero", { scrollTrigger: { trigger: ".first", start: "bottom bottom", scrub: 1, pin: ".first", }, y: "-100%", duration: 2.5, ease: "power4.out", }; gsap.to(".hero-img-5", { scrollTrigger: { trigger: ".many-image-move-trigger", pin: ".many-image-move", start: "bottom bottom", end: "100%", scrub: 1, id: "one", }, onComplete: heroReduce, right: 164, bottom: 96, width: 344, height: 200, });