Search the Community

https://cloud.movavi.com/play/3c84a61c-32e4-498b-b514-07d74585fb02 So my structure is the following: .sectie-branding (section) .branding-row .et_pb_row .website-row .et_pb_row .activatie-row .et_pb_row This is my gsap: gsap.registerPlugin(ScrollTrigger); const rows = gsap.utils.toArray('.sectie-branding .et_pb_row'); gsap.to(rows, { opacity: 1, // Fade in the rows ease: "none", scrollTrigger: { trigger: '.sectie-branding', // Target the branding section start: "top top", // Start when the section hits the top of the viewport end: "bottom top", // End when the bottom of the section hits the top scrub: true, // Smooth scroll interaction pin: true, // Pin the section during the scroll anticipatePin: 1, // Adjust pin behavior for smoother experience onUpdate: self => { // Loop through each row and calculate visibility based on progress const totalScroll = rows.length; const progress = self.progress * totalScroll; // Get scroll progress based on the number of rows rows.forEach((row, i) => { const rowProgress = progress - i; // Calculate how far we are from this specific row gsap.to(row, { opacity: 1 - Math.abs(rowProgress), duration: 0.5 }); // Fade in/out based on progress }); } } }); This is my css: .sectie-branding { max-height: 300vh; position: relative; height: 300vh; /* Simulates scrolling for 3 sections */ overflow: hidden; /* Prevents overflow outside the section */ } .sectie-branding .et_pb_row { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; /* Each row fills one full viewport height */ display: flex; align-items: center; justify-content: center; opacity: 0; } .sectie-branding .et_pb_row.active { opacity: 1; } But as u can see in the video, it looks like its inserting another 300vh section right after u scroll out of the last row causing an huge black-space.

Good morning, I'm building a site with Wordpress and the Divi Builder. I have this animation in GSAP that I would like to edit. Here the original: https: //taxiboat.salone24.it/throttle-originale/ Here how I would like it: https: //taxiboat.salone24.it/throttle-mio/ The css and js files are visible at the codepen link. What I would like to have is that when I scroll the page, the white circle that masks the image, it closes completely (while now it remains a little open), and only after the circle has closed completely and has hidden the background image, only now, my module appears (the one visible in the second link / throttle-mio /). (The slide with the big image) Could you help me understand how I can do it? Many thanks Davide