fdev

Sorry about that - forgot to include the link - https://drippop.com/ Thank you for replying such late at night! Ah ok thanks for explaining, I would love to try and write some custom logic myself but I just struggle to know where to actually insert the custom logic into the code. Would it be its own function or would it be within the observe function?

Hey Jack, I understand what you mean, maybe using scrollTrigger isnt the best option. What I am trying to do is when the user lands on section 3, when they scroll (or at least swipe on the touchpad/mouse) it would trigger an animation that pins the whole section but changes the content, it would need to be pinned as i want there to be a full page animation that will look like you are scrolling with pinned side sections. An example I found on the web is this site here where you can see relies on the user to scroll to change the sections. I just can't figure out how to add these animations into the large observe function I already have. Thanks again for your advice its much appreciated!

Is there an easy way to pause the observer function that I have running here so that in section 3 i cam use a scrolltrigger for an animation and once that animation is finished the observer snap scroll animations can begin again? Thanks

Hey, Sorry to keep asking questions but I have read through the docs again and again and can't seem to figure out how to stop the snap happening midway through a section if the section is more than 100vh. I tried to debug and console logged the progress for each section to figure out where snapProgress was coming from but can't figure out how to stop the snap being triggered until you get to the bottom of the section. I tried changing 'start: "bottom bottom" but this then snaps to the bottom of the section instead of the top: https://codepen.io/fayskerritt/pen/BavgEzG Thanks for your advice before, but can you please point me towards which bit of the scroll function I need to edit to stop this from happening as I tried changing the return to values but this broke the function altogether. Thanks

Sorry about that I have edited the demo so it is a lot more minimal and have taken out a lot of unnecessary code. I watched the video you sent and can't see how I can mimic this because the animations it is doing are within a foreach loop and it is the same animation each time whereas my animation is completely different so I can't figure out how to add them all within one scrolltrigger. Let me know if you can see the issue here, if you scroll slow you can see the animation works fine but if you scroll fast there are parts of the svg that are left visible. https://codepen.io/fayskerritt/pen/zYyVLBQ Thanks

Thanks for clarifying, this makes sense! In regards to getting the scroll to not snap when the panel is taller than 100vh where would I put this logic in the demo that you sent Jack as I am struggling to figure it out in the function in the demo below: https://codepen.io/fayskerritt/pen/BavgEzG

Hi, As you can see in my codepen below (it is a bit buggy because I have tried to only put in the relevant code) the svg which is the green down arrows should animate as per the screenshot attached but you can see that if you scroll fast you get some of the svg paths still showing as if the timelines havent had time to finish properly. If you scroll slowly you can see the desired effect but I am unable to get it so that the timelines are forced to finish when the next scrolltrigger is triggered and if you scroll fast you are left with random svgs on the page. https://codepen.io/fayskerritt/pen/zYyVLBQ?editors=0110 (please note it is best to view this on a full screen as there is styling to change the layout from 768px and lower and will not show issue, thanks) Thanks

This is really thank you! One more question, is there any way to speed the snap up, it doesn't seem to have the same layout as a timeline so not sure if its as easy as adding 'duration: 0.2' or something like that? I just want it to snap a bit quicker than it does currently if possible. Thanks Sorry also to add to this, in the minimal demo the Orange section is bigger than 100vh so once the top of this section has reached the top is there a way like before allowing it to be normally scrolled until the next section reaches the viewport then to snap to that?

Hi again, Here is my minimal demo that demonstrates when I use scrub:1 the panel will jump to the top of the viewport instead of stopping when it gets to the bottom of the navbar. https://codepen.io/fayskerritt/pen/QWzRYVa Thanks

Can I please add to this conversation and ask if it is possible to snap elements so that the top is 100px from the top of the viewport (for example so the element snaps so the top meets the bottom of the navbar). At the moment the element is going right to the top of the viewport so some of it is hidden beneath the navbar. Thanks

I hope this codepen explains it, its the section with the cat photos that I want to use the snap effect on but as you can see its happening on the other sections as well https://codepen.io/fayskerritt/pen/zYymPGa

Can someone please help me as I want to use the scroll snap effect but I don't want it on the whole webpage. So you can see in my codepen which I took from a different forum you cant actually land on the white sections they just get scrolled past. If you scroll up from the blue section you will see the white section I built. I also made one at the bottom which you can't even scroll to. Thanks

@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 }, }); }); });