Leaderboard

You can add a delay to updating the isTweening with gsap.delayedCall(). Make sure you play with the 1 second value to get it to act like you want. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/Babxmqr?editors=0010

Hello there. Here are the problems in your pen that are responsible for it not working: You are gettting an error in console - there is no such thing as SmoothScrollbar.init() - it is Scrollbar.init() instead; nothing related to GSAP. Also, as far as i know, smooth-scrollbar does not have an 'effects' property; so that is probably redundant, too. I would suggest removing that to prevent any possible problems that might arise from that. You don't have a layout/setup that would work with smooth-scrollbar to begin with; you'll need to apply proper CSS styling on the body and the container you're going to initialize smooth-scrollbar on for it to work; nothing GSAP related. In CSS as well as in JS you are targetting elements with the class '.item' but you don't have any such elements in your HTML, you only have '.item-1', '.item-2' and '.item-3'; nothing GSAP related. Your .item element has a height of 0 set via CSS. Although in a comment you say you're going to set its height via GSAP, you never do. Again, less of a GSAP specific problem. And finally: You are not declaring a specified scroller element in your ScrollTrigger, which you will have to do, as smooth-scrollbar does not run on the body element. This one is something GSAP / ST specific; For clarity, see the smooth-scrollbar example and documentation on https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy() Since a lot of your problems arise from not properly handling smooth-scrollbar in the first place, I would suggest having a thorough look at their documentation. Smooth-Scrollbar is not a GreenSock product, so you really shouldn't expect to get support for it in the GSAP forum. I implemented the raw basics to the fork of your pen below - and it works as it should. I give no guarantee that it is bullet proof with regard to smooth-scrollbar though; you should check on all that yourself. https://idiotwu.github.io/smooth-scrollbar/ https://github.com/idiotWu/smooth-scrollbar https://github.com/idiotWu/smooth-scrollbar/blob/develop/docs/api.md Hope this will help get you going in the right direction though. Good luck! https://codepen.io/akapowl/pen/KKERaYE

It's not really GSAP doing that. On line 28 you get all the children, that includes the button! If you remove the button from the parent it works better. I've also just called the shuffleList() in the button click but there is something off in your calculations that positions the elements. I don't have much time at the moment, but personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/dyreqXz?editors=0010

Are you saying you literally want to force the user not to be able to scroll back up to the intro? So they'd see the scrollbar, and if they drag it up, you want the browser to just refuse? That sounds super frustrating for users. Or are you saying that once you scroll past the intro, it gets removed from the DOM so that suddenly the scrollbar would jump to adjust to the new height? Sorry, I'm just not quite sure what you're asking here. As for the empty space, that's just because in your onDrag, you're setting the scroll to more than the maximum possible scroll position, so you can just cap it like this: https://codepen.io/GreenSock/pen/oNVdWdO?editors=0010

Hi @BuiltByMD and welcome to the GSAP Forums! Unfortunately I didn't had time to make this work with your current CSS setup, so I created this super simple demo that illustrates my approach for this: https://codepen.io/GreenSock/pen/eYXrgaY Is missing the Next/Prev button animations but hopefully you'll get the gist of it and will be able to include that in your code. The logic part of the code seems to be robust and is flexible in terms that it'll allow you to add/remove more rows (right now hardcoded) to the DOM. Hopefully this helps. Happy Tweening!

Hi, You can add a boolean check in order to allow one Observer callback at a time: let isTweening = false; // Observer instance Observer.create({ target: window, type: "wheel", onUp: () => { if (isTweening) return; isTweening = true; loop.previous({ onComplete: () => isTweening = false, duration: 0.4, ease: "power1.inOut" }); }, onDown: () => { if (isTweening) return; isTweening = true; loop.next({ onComplete: () => isTweening = false, duration: 0.4, ease: "power1.inOut" }); }, }); Hopefully this helps. Happy Tweening!

What have you tried already? We love to see minimal demo's, that way we can see your thought process and thus better help you understand the tools! Here I've created an extra ScrollTrigger that lists your requirements and then snaps to the that ScrollTrigger progress of 1 eg 100%, the snap value has a lot more settings, so be sure to read the docs everything you ever want to know (about ScrollTrigger) is in there! https://gsap.com/docs/v3/Plugins/ScrollTrigger/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/gOEeNGG?editors=0110

Good job figuring it out! Well I noticed you're not doing proper cleanup which is more of a React thing. I'd strongly recommend replacing useLayoutEffect() with the new useGSAP() hook because that handles a lot of the cleanup for you automatically. 👍 If you haven't done so, this is a good article to read: https://gsap.com/react

Just to throw my two cents out there - some CodePen accounts to bookmark and/or follow. Talented coders that feature a ton of GSAP: Cassie Evans: https://codepen.io/cassie-codes Blake Bowen: https://codepen.io/osublake Carl Schooff: https://codepen.io/snorkltv Pete Barr: https://codepen.io/petebarr Steve Gardner: https://codepen.io/ste-vg Ryan Mulligan: https://codepen.io/hexagoncircle Tom Miller: https://codepen.io/creativeocean Chris Gannon: https://codepen.io/chrisgannon Darin Senneff: https://codepen.io/dsenneff Craig Roblewsky: https://codepen.io/PointC/ (this guy is awesome ?) It may not be exactly what you need, but there should some good inspiration in those accounts. Happy tweening.