Perdixo75

@akapowl thanks a lot, i've got my answers !

I've been using GSAP for a couple of month now and i really really enjoy it! Right now, i'm working on my portfolio using Barba.js for page transitions. I have a little question that might sound weird for a non-beginner but here it is : Let's say i have a long page with a lot of content. How do you animate only the elements that are visible in the viewport when leaving the page ?

@Rodrigo Yes i've added a 0.6 value, looks wayy smoother ! I've pretty much done it. But i can't figure out how to add a scale effect on each project-container__inner during the scroll of each section.. Here's what i have right now : https://codepen.io/Perdixo757575/pen/bGgvygv

@Rodrigo Thanks for your answer. I agree the site isn't easy to navigate. What interest me is only that selected project section part with that "sticky stack" effect on scroll ! After looking at what you sent and trying again, i still didn't find the good solution. Here's where i am right now : https://codepen.io/Perdixo757575/pen/bGgvedy Still having trouble to understand how the effect on the website work

Hey, I'm new to gsap and i'm currently looking at the ScrollTrigger plugin. I'm trying to create a scrolling effect that i've seen on multiple websites lately. You can see it in action in the "Selected projects" section of the following website : https://brunoarizio.com/ . I thought it'd be a nice exercice to try to reproduce it, but i'm totally stuck. I'm not sure about the mechanics here .. i've tried for 2 hours to reproduce this effect (without the smooth scroll) but i can't make it work.. Any indications would be much much appreciated (with explanations if possible!). From my beginner point of view, here's what happens (let's say we have 3 projects) : - Each project have a different z-index so the first project is on top of the second and so on. - The second project is moved top so we can only see it's infos (so if the height of one project is 750px, we move the first project -750px on the Y axis and the second one -1400px on the Y axis). Now is the part i can't get my head around using the ScrollTrigger plugin : - As soon as the project hits the bottom of the screen (minus the height of 3 project infos height), it translates top. - As soon as its info div hits the top of the screen (pretty much so), the same goes for the second project, and so on. I can't figure out how to translate this to code using the scrollTrigger plugin ... If someone could help me and explain to me what i'm missing that'd be awesome ! I've added a codepen but it's a thousand miles away from the final effect, i've modified it a hundred times ...