jofairden

I see... what I dont get is that in the codepen the page ends nicely where the last div stops.. When I set it to 9999 on my page the page becomes really long. Is there another option I've missed there? I do have a footer that comes after which is where the page should stop. Maybe I should calculate the height of the content plus the footer instead?

Im not asking for consulting.. I just have one issue with GSAP that I don't know how to solve.. Please see previous post.. When I am using the pinned feature of ScrollTrigger, the sections are overlapping (see the middle section for example) I don't know why it's doing that..

you can see now in the codepen how they overlap weirdly.. I dont know why it does this, but you can never see the full content of each div

Well I want to animate it.. I want it to be smoother. But right now it's just natively scrolling through, I suppose I should be using the smooth scroll plugin for that? Right now I have it working the way I vision.. sort of.. the divs feels jittery, but they move up with the header.. What do you think? Also in the original site im making, the divs do not have a background, so when they overlap you can see the previous divs.. What Im trying to do is fade them if the other div comes on top, but I'm not sure how to get/use the next div's Y position to do that.. https://codepen.io/jofairden/pen/rNdqPGQ The effect im trying to achieve is something like this: https://stackoverflow.com/questions/9525215/using-css-can-you-apply-a-gradient-mask-to-fade-to-the-background-over-text So my idea is to apply that based on the Y position of the next div.. just unsure if GSAP is capable of doing this. I ve been failing so far

Actually, max is the end that I want.. My content won't go beyond this scrollable.. I want the header and nav to always to in view. Thats why I made them have sticky positioning. I've come pretty far with this script: cards.forEach((card, index) => { ScrollTrigger.create({ trigger: card, start: "top top+=400", pin: true, pinSpacing: false, markers: true, id: 'pin', end: 'max', invalidateOnRefresh: true, scrub: 2 }); }); What I am struggling with is that the divs seem to overlap and no longer have their original space between them. I am also changing the scale of the header down as scrolled down, but I dont know how I can move the pinned items up to compensate for the size change of the header.. (And it scales back as you scroll back up, so the divs should be moved down again accordingly) See this pen, this is roughly the behavior I have right now.. My issue stated above https://codepen.io/jofairden/pen/rNdqPGQ

Im having some trouble with this code... Mind you I am new to GSAP so I am likely missing something obvious. I have a simple page with 3 main elements: - navbar - header (logo / slogan) - main content Now I want the main content to scroll in a specific way. Rather than scrolling down on the page, I want the navbar and header to stay in place. When scrolling down, I want the top div in the main content to stay put, but each individual div after to scroll up (Vertically) on top of the previous one.. So basically the section overlap as you scroll.. I've tried for hours and can't seem to get it to work properly.. They dont have to snap necessarily.. I want it to feel smooth.. What I am struggling with specifically is: - How do I control where the pin goes exactly? I want it to start right away when scrolling.. Right now the divs snap really weird when scrolling.. The main behavior seems okay.. But they also for some reason overlap and you can't see all the content.. - How do I fade out the previous div as the next one comes on top of it? Something with opacity? I can't seem to figure this out, but it seems to me GSAP can do this