fdev

@akapowl Thanks again for your reply, I want to stick with using gsap as I am assuming the libraries I am using are free to use. I have used your structure and made my own codepen but I am struggling with a few things I hope you can help with: 1. I have added in buttons to anchor down to the sections but the 4th one (purple) isnt working, is this to do with this bit of code - let p = gsap.utils.clamp(0, 1, progress || 0), 2. There is a bit of a delay before the blue slide starts to move, is there a way to get this to start moving when the screen starts scrolling? 3. Is there a way I can get the background text (e.g. 'BLUE') to sit on top of the images while scrolling but when you stop scrolling it falls behind the images? 4. Also with this background text can I get it to scroll with the coloured background like my previous codepen did? 5. Can I get rid of the black section at the bottom? So when it gets to purple you can't scroll back past that? Sorry quite a few questions, thank you in advance! My codepen: https://codepen.io/fayskerritt/pen/ZERYWvd

Thanks for your reply @akapowl I tried your code in my codepen and it doesnt seem to work, I think I might be using a slightly different structure to you though, would you have a look please? https://codepen.io/fayskerritt/pen/yLEBWWY Hope this minimal demo is ok. Thanks in advance!

I hope it isn't too late to ask a question on this thread.... But how would you go about anchoring down to one of the coloured sections (e.g. Orange) from a navbar type thing? I tried this code but it doesn't seem to work: gsap.utils.toArray("nav a").forEach(function(a) { a.addEventListener("click", function(e) { e.preventDefault(); const id = e.target.getAttribute("href"), trigger = ScrollTrigger.getById(id); console.log(id); console.log(trigger); gsap.to(window, { duration: 1, scrollTo:{ y: trigger, autoKill: true }, }); }); });