Leaderboard

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. Personally I like my CSS to state the visible state of the items, so that I can use GSAP to antimate .from() some value to their final state. If you are worried about the "flash of in styled content (FOUC)" read the following https://gsap.com/resources/fouc/. You were having a .forEach loop, but then a stagger in your animation, this doesn't work. The loop gets you one time and a stagger needs multiple items to do its thing. Instead of a zero duration tween I like to set the ease: "steps(1)" which gets you an animation that gets form a progress of 0 to 1 in 1 step. I've set your stagger to be twice as long as the duration, which makes it that every cards does nothing for 0.5 seconds after it has animated. I've installed GSDevTools so that you can easily inspect your animation to make sure it is doing what it should do Your setup had one ScrollTrigger and one timeline for each card. Right now there is one timeline for all cards and a ScrollTrigger to control that one timeline. I've also made ScrollTrigger part of the timeline, so now it is even more clear which timeline it is controlling. I've also placed some comments in your JS to explain certain properties, be sure to read thought them. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/XWQjqLb?editors=0010

I'm not sure what you mean. Are you talking about the first one? That one is probably already half way through the progress of the of it's start and end markers, so that one is already at 100, but that is only for the first one right? You could use a clamp() around your start triggers to make it only play fully no matter what screen size. Otherwise could you be more specific what the blocks are doing now and what you want them to happen?

I also forgot, last but not least, check this video @Carl made about this particular subject, it's really great:

Yeah I totally agree with @Toso, plain canvas with matterjs seems to be the best and simplest approach, since everything is already solved for you, anything else is complicating things far too much. Happy Tweening!

Hi @mihi welcome to the forum! There seems to be some logic issue in your tween here. I've disabled ScrollTrigger and installed GSDevTools and as you can see at the mid point of the animation nothing happens anymore (around the 4 second mark). https://codepen.io/mvaneijgen/pen/NWmRgJg?editors=0010 I see you're using a lot of forLoops and if statement which is great, but I see a lot of people making this mistake (and I also do it often) and this is why I've written the following post. When this happens to me I like to take a step back and make it simple, just write out the animation you want to happen by hand and see if the logic is correct with your loops, doing this will probably help you fix your own issue. I've looked at your code and I can't see anything obvious which is going wrong, so I hope the post helps you debug and also just start console.log() values to make sure they are what you think they are. Hope it helps and happy tweening! Edit: I'd looked some more at your code and indeed the logic with if statements and loops is not correct which is throwing everything off. We kinda have sort of forLoops built in GSAP in the form of staggers, see https://gsap.com/docs/v3/GSAP/Tween?_highlight=stagger#staggers And to get a better understanding of them and what probably also helps for the effect you're going for check out this amazing tutorial by our own @Carl I was wondering, so I restructured some of the code. I still highly recommend checking all the resources I've shared, I really think it will help you understand how things works under the hood which will allow you to making another animation in the future so much easier, but If you want a hint check out this. Again hope it helps and happy tweening!

with threejs you are making it 10x harder for yourself since you will also need a physics engine with threejs like Rapier or cannon, creating it with a framework like react for example. you will need to study also extra stuff like react three fiber, react three drei, react three rapier / cannon i think Rodrigo gave you the best option here to use a physics engine directly something like this one i created with Matter it was much simpler to do it compared to trying to add physics with threejs https://balls-orcin.vercel.app/ you can grab them and test the zero gravity btn

Hi @Kasym welcome to the forum! You can add a gsap.delayedCall() https://gsap.com/docs/v3/GSAP/gsap.delayedCall()/ to your is animating valuable, so that is only releases it after a second or so (you have to find which timing suits your project. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/LYvRbar?editors=0010

Hi @BlackTulipCreations welcome to the forum and thanks for being a club member! We normally don't debug live website, there is just no way to modify the code to gleam any meaning full insight from it, but I did my best and I can't seem anything weird. The codepen you've shared works perfectly, no matter how fast I scroll. The only thing I can think of is that something is lazy loading the images, which is conflicting with the ScrollSmoother here. Is that something you can loop in to? Hope it helps and happy tweening!

Actually, you were totally right @Rayan Boutaleb. There was indeed a bug that would affect snapping if you revert() a context that contains a ScrollTrigger with a scroller defined that's not the window/body. That should be fixed in the next release which you can preview at: Core: https://assets.codepen.io/16327/gsap-latest-beta.min.js ScrollTrigger: https://assets.codepen.io/16327/ScrollTrigger.min.js In the meantime, here's a corrected version of your CodePen that shows a workaround in place which was basically recording the _scrollTop value from the scroller element, and restoring it inside the cleanup function: https://codepen.io/GreenSock/pen/GRLjKEw?editors=0110 Does that clear things up? Sorry about any confusion there.

Hi, Unfortunately you didn't followed my advice since the animation is still tied up to ScrollTrigger: const tlCards = gsap.timeline({ scrollTrigger: { trigger: '.accordion-section1', start: 'top top', end: '+=1000', pin: true, scrub: true, invalidateOnRefresh: true, markers: true, }, }); I removed that, put the timeline on an endless loop and removed the ScrollTrigger part. This is what your timeline is currently doing: https://stackblitz.com/edit/stackblitz-starters-4ftocx?file=app%2Fpage.tsx That being said, unfortunately I still can't understand what you're trying to do. Once again I would strongly recommend you to even drop all the Next/React and other frameworks stuff and focus only on the animation, that's why I keep bringing back the codepen demos. Porting those to react is super easy, just focus on the animation. Happy Tweening!

@akapowl Thank you so much for this. I've been wracking my brains for the last couple of days trying to figure out why my scrolling animation was jumping at the end in WordPress Elementor however, I didn't realize the issue was a transition CSS effect being applied to the container by Elementor itself. I added selector { transition: none; } directly to the container with the GSAP ScrollTrigger animation and it resolved my issue. No more jumping!!

Hi @Mijan and welcome to the GSAP Forums! A commercial license is needed if one or more of these conditions are met: Do you have multiple developers that need access to the bonus plugins like SplitText, ScrollSmoother, MorphSVG, etc.? Does your GSAP-enhanced website/game/product require the user to pay a fee to use? (like Netflix.com) Are you selling a GSAP-enhanced product to multiple end users? (like a website template, theme or game, Webflow cloneable, etc.) Are you using GSAP in a theme/game/app with optional paid features/upgrades? In your particular case the fourth condition is met since users would have to pay to install and use a plugin that relies on GSAP features. Is worth noticing that this is not a case of how many GSAP features the plugin uses. So you would need a Business license. Our entire licensing model is based on the honor system and a simple number-of-developers pricing structure. You don't need to enter some API key for every site you use it on or anything like that. It's very simple, and we fully recognize that. We also trust that most people want to do the right thing and honor the work of other developers. We aim to treat others the way we'd want to be treated and we believe that if we serve well, the market will recognize and reward that by joining Club GSAP eventually. If your membership expires, nothing will change. We don’t inject “phone home” scripts to verify your license status. Functionality doesn’t suddenly stop upon expiration. Inspect the code for yourself if you’d like to verify (that’s why we provide the raw source code). As mentioned before we use the honor system, so after your license expires we expect for you to renew it and keep selling your plugins , If you don't renew your subscription you won't have access to the latest updates after your license expires. Hopefully this clear things up. Let us know if you have further question on this subject. Happy Tweening!

Hi @August Devices, Is really unclear what you're asking for, so my best guess is that you may be looking for the reverse config option: const loop = horizontalLoop(items, { reverse: true, }); Happy Tweening!

A view notes The wrap function doesn't care about the index not being correct. There are only 4 items, but if you feed it index = 5 it will wrap back to the first one. There is a logic issue in your activeIndex === 4, there are 4 items but javascript counts from 0 so this should be 3, or don't bother at all and just keep incrementing the number and let the wrap function handle it for you https://gsap.com/docs/v3/GSAP/UtilityMethods/wrap() scale 1 will do nothing, because the scale is 1 on page load. Again no React expert, but you can just call a new tween in your on click function now it will create a new tween on each click. GSAP calculates tweens records values on page load, so that it only has to do the animation part and not the calculation part when things should animatie. If you're having trouble with this you can set immediateRender: false, then it will wait until it is called to record the values, not pessary in this case I thought in your previous demo you'd used the useGSAP hook which is a replacement for useEffect when working with React, please read our React guide! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ZEZOmrR?editors=0011

Yeah, that's a browser rendering issue. Annoying, I know. It appears to fix things if you just set will-change: transform on the thing that's moving: https://codepen.io/GreenSock/pen/LYBzGGg Thanks for being a Club GreenSock member! ??