DylanDold Posted September 11 Share Posted September 11 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. Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 11 Share Posted September 11 Hi @DylanDold welcome to the forum! Sounds like you just don't want to fade out the last slide? Your setup seems really complicated for how simple this effect is. In GSAP everything starts with an animation and after that you can add ScrollTrigger to the mix to see how your animation is working on scroll. It looks like you reversed the logic eg you started with scrolling and after that added the animation, this will make everything so much more complicated than it has to be. I've written a post on how you can make these kinds of effects and what the logic is behind them, see below: With that logic it allowed me to make this, which was just a question of updating the tweens to animate the opacity. As you can see the code is so much more simpler and shows you what you can do when you start with an animation before you even think about ScrollTrigger. Hoop dat het helpt en veel geluk met je project! See the Pen XWLGEKJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
DylanDold Posted September 11 Author Share Posted September 11 13 minutes ago, mvaneijgen said: Hi @DylanDold welcome to the forum! Sounds like you just don't want to fade out the last slide? Your setup seems really complicated for how simple this effect is. In GSAP everything starts with an animation and after that you can add ScrollTrigger to the mix to see how your animation is working on scroll. It looks like you reversed the logic eg you started with scrolling and after that added the animation, this will make everything so much more complicated than it has to be. I've written a post on how you can make these kinds of effects and what the logic is behind them, see below: With that logic it allowed me to make this, which was just a question of updating the tweens to animate the opacity. As you can see the code is so much more simpler and shows you what you can do when you start with an animation before you even think about ScrollTrigger. Hoop dat het helpt en veel geluk met je project! Thanks for the kind words! But i just cannot get it to work Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 11 Share Posted September 11 No worries, just create a minimal demo on something like Codepen with your setup and we'll be happy to take a look at your setup. Keep in mind CSS is really important when working with GSAP and your current CSS doesn't work with this setup. Link to comment Share on other sites More sharing options...
DylanDold Posted September 11 Author Share Posted September 11 20 minutes ago, mvaneijgen said: No worries, just create a minimal demo on something like Codepen with your setup and we'll be happy to take a look at your setup. Keep in mind CSS is really important when working with GSAP and your current CSS doesn't work with this setup. Thanks: See the Pen mdZoxvj by Dylan-Doldersum (@Dylan-Doldersum) on CodePen The colors are normally background-images. But for the sake of the simple snippet ive made it a color. Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 11 Share Posted September 11 What exactly is not working? As I said CSS is really importent, please check my post it explains everything you need. I've just add some CSS Grid logic to . sectie-branding and everything works 🤷 See the Pen JjQzvbp?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
DylanDold Posted September 11 Author Share Posted September 11 4 minutes ago, mvaneijgen said: What exactly is not working? As I said CSS is really importent, please check my post it explains everything you need. I've just add some CSS Grid logic to . sectie-branding and everything works 🤷 Thanks but what im trying to achieve is, like in the video. When scrolling, but last row in the section gives alot of blackspace i assume because of the pin:true creating a clone. I think we missunderstand each other. Its all happening while scrolling through. Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 11 Share Posted September 11 That is because the ScrollTrigger is commented out enable it and it works as you expect! 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 highly recommend reading the code you copy and paste from the internet and try to understand what it is doing, that way you learn what is what, if you just blindly copy things it will be hard to get a feel for what it is doing. See the Pen JjQzvbp by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now