Chybosky Posted April 26, 2022 Share Posted April 26, 2022 I need some help, I am currently experiencing some issue on a website I am working on. Here is the website URL https://gsap.asdt.com/home-2 The Scroll Snap doesn't work on the page. Here is the my GSAP code; <script> gsap.registerPlugin(ScrollTrigger); gsap.utils.toArray(".panel").forEach((panel, i) => { ScrollTrigger.create({ trigger: panel, start: "top top", scrub: true, pin: true, pinSpacing: false }); }); ScrollTrigger.create({ snap: 1 / (panels.length - 1), duration: 0.5 }); </script> Please how to I resolve the problem. Link to comment Share on other sites More sharing options...
OSUblake Posted April 26, 2022 Share Posted April 26, 2022 Welcome to the forums @Chybosky We really can't troubleshoot a live site for you. If you're having issues, please make a minimal demo of your issue. Thanks! 2 Link to comment Share on other sites More sharing options...
PointC Posted April 26, 2022 Share Posted April 26, 2022 Probably a good idea to check the console on this one. Looks like you're loading an older beta version of GSAP (current one is 3.10.4) and I see a whole bunch of errors of missing targets, variables that are undefined and some that are declared twice. Here's a small part of them. As Blake mentioned, a minimal demo is the only way we can help. Just show us what you want to do by using a few divs and we can probably point you in the right direction. Quite often you'll be able to spot your own error just by simplifying everything. Thanks and good luck. 3 Link to comment Share on other sites More sharing options...
Chybosky Posted April 27, 2022 Author Share Posted April 27, 2022 @OSUblake Thank you very much, I'm currently working on the Minio.al Demi@PointC Thank you so much for pointing out this error, I have removed the unused variables and currently working on the Minimal Demo. Which I will share here soon. Link to comment Share on other sites More sharing options...
Chybosky Posted April 28, 2022 Author Share Posted April 28, 2022 Hello @PointC @OSUblake Thank you so much for your help. This is what I have done so far on the Minimal Demo on CodePen. See the Pen xxYKVag by Chybosky (@Chybosky) on CodePen The Scrolling doesn't snap to the very top of the bar. Also is it possible to have the page scroll on the slightest scroll using GSAP? Thank you 🙂 Link to comment Share on other sites More sharing options...
Chybosky Posted April 28, 2022 Author Share Posted April 28, 2022 Also the Footer and the Copyright section in the get covered by the last panel. I couldn't figure the reason why. I also attempted using CSS Snapping but it didn't give the exact prototype feel. Link to comment Share on other sites More sharing options...
OSUblake Posted April 29, 2022 Share Posted April 29, 2022 Snapping, whether through GSAP or CSS, will only start once you stop scrolling. If you're looking to do something like fullpage, you can use the Observer plugin to control stuff using stuff like wheel and touch events, kind of like what this demo is doing. See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Chybosky Posted April 29, 2022 Author Share Posted April 29, 2022 Thank you @OSUblake. Please How can I set this to just scroll up and down and not animate continuously? Link to comment Share on other sites More sharing options...
Chybosky Posted April 29, 2022 Author Share Posted April 29, 2022 Please I will really appreciate any learning resource on Vertical Scroll Snapping using Observer Plugin. Link to comment Share on other sites More sharing options...
OSUblake Posted April 29, 2022 Share Posted April 29, 2022 8 hours ago, Chybosky said: Please How can I set this to just scroll up and down and not animate continuously? I'm not sure what you mean by this. 5 hours ago, Chybosky said: Please I will really appreciate any learning resource on Vertical Scroll Snapping using Observer Plugin. There really aren't any learning resources, but we do have a collection of Observer demos on CodePen. The thing to keep in mind for the Observer is that is doesn't provide any logic to any animations, so you have to come up with that. Observer Showcase - a Collection by GreenSock on CodePen Link to comment Share on other sites More sharing options...
Chybosky Posted April 29, 2022 Author Share Posted April 29, 2022 24 minutes ago, OSUblake said: I'm not sure what you mean by this. @OSUblake When the Scroll gets to the last slide, it returns to the beginning of the page. Is it possible to have the slide scroll only scroll up at the end of the page. Link to comment Share on other sites More sharing options...
OSUblake Posted April 29, 2022 Share Posted April 29, 2022 Sure, I just switched the wrap to clamp, and then check if the index is the same as the currentIndex. If they're the same, that means it's either on the first or last slide, so we should just return out of the function. let clamp = gsap.utils.clamp(0, sections.length - 1); function gotoSection(index, direction) { index = clamp(index); // make sure it's valid // If they are the same, it's either the first or last slide if (index === currentIndex) { return; } ... } See the Pen GRQKPMo by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Chybosky Posted May 1, 2022 Author Share Posted May 1, 2022 Thank you so much @OSUblake, It stopped the continuous scrolling. I implemented it on my Minimal demo and it work. I experienced one sight issue when scrolling. After scrolling to the section, on page scroll up, the last section sticks underneath and appears visible on scroll. Please what did I do wrong? See the Pen mdXbLOJ?editors=1010 by Chybosky (@Chybosky) on CodePen Link to comment Share on other sites More sharing options...
Chybosky Posted May 1, 2022 Author Share Posted May 1, 2022 Is it required to have the Outer and Inner div class when working with Observer Plugin? Thank you Link to comment Share on other sites More sharing options...
GreenSock Posted May 1, 2022 Share Posted May 1, 2022 Observer plugin doesn’t care how you structure your elements - it just listens for events and dispatches things accordingly. 1 Link to comment Share on other sites More sharing options...
Duet Colin Posted August 11, 2023 Share Posted August 11, 2023 Would this example work with ScrollSmoother? Link to comment Share on other sites More sharing options...
Rodrigo Posted August 11, 2023 Share Posted August 11, 2023 Hi @Duet Colin, You can mix Observer and ScrollTrigger so you could mix Observer with ScrollSmoother. Here are a couple of examples of ScrollTrigger + Observer: See the Pen oNdNLxL by GreenSock (@GreenSock) on CodePen See the Pen 1ccf60146d680c09ba6074bf9132778d by GreenSock (@GreenSock) on CodePen Finally here is a ScrollTrigger examples that does something similar but without Observer: See the Pen JjaWKXG by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 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