GreenSock

Great catch, @Cuberto! Sorry about any confusion there. This would only happen if the very first ScrollTrigger (in terms of refreshPriority/order) has once: true. It should be resolved in the next release which you can preview at: https://assets.codepen.io/16327/ScrollTrigger.min.js (you may need to clear your cache) Better?

No problem! Happy to help. By the way, another option is to just create CSS variables for your various colors that you plug into your radial gradients, and then just animate those individual CSS variables in the tween(s). Have fun!

One of the reasons gsap.quickTo() is so fast is because it skips a bunch of conveniences like unit conversions, special features like "_short", relative values, etc. - it's purely for funneling a raw number directly into an existing tween. So I would probably do it like this: https://codepen.io/GreenSock/pen/MWRJJay?editors=0010 One simple tween that gets killed/replaced on each move.

Because "background" is a combination of a bunch of different sub-properties. It's much cleaner to focus on exactly the one you need which is backgroundImage. I have no idea - I didn't create that. Looks to me like it's useless.

I just meant that if you create a ScrollTrigger...and then re-create that same one again without reverting/killing the old one, that could cause an issue. Or if you did multiple .from() calls, like: gsap.from(".target", {x: 100}); gsap.from(".target", {x: 100}); // ran again without reverting the previous one, thus the end value will be incorrect. When you can't seem to reproduce the issue in a minimal demo, it becomes a game of "spot the difference" - try making it more and more like your "real" project until it breaks. 🤷‍♂️

LocomotiveScroll is not a GreenSock product, so we can't really support that. Sorry. But you'll significantly increase your chances of someone being willing to help if you provide a minimal demo that clearly illustrates the issue.

Yeah, unfortunately we really can't help without a minimal demo to look at. Obviously something else is interfering in your project. Are you using React or something? Are you absolutely positive that your setup code only executes ONCE? Are you maybe not doing proper cleanup or something? Are you using the latest version of the tools?

If that gives you the result you want, that's totally fine. I don't think it'd be good to make that the default behavior in Draggable because of the other potential side effects, but if your solution works for your project, fantastic, do that. 👍

Welcome to GSAP, @BattN There are many ways you could do that. Here's just one: https://codepen.io/GreenSock/pen/KKYNYgy?editors=0010

@Reela we don't have templates for whole sites like that, no, but there are a ton of CodePen and Stackblitz demos that are linked to in the docs and resources section of the site. https://codepen.io/GreenSock/collections/ Have fun!

Sounds good. And you don't have to use the beta if you don't want to - you could just apply that workaround from my CodePen (save/restore the _scrollTop function on the scroller element). Let us know how it goes. And thanks for being a Club GSAP member! 💚

This sounds like the issue discussed here: https://github.com/darkroomengineering/lenis/issues/311#issuecomment-1986531084 It's not a GSAP/Observer problem - it's a very weird Firefox behavior that Lenis doesn't handle properly but I think they're working on a fix.

I would also recommend making sure you're using the latest version of GSAP/ScrollTrigger. Your demo uses a VERY old version.

That's a very inefficient way of running that logic. Are you trying to do this?: https://codepen.io/GreenSock/pen/yLraRBd?editors=0010 That'll play/reverse the animations when that particular spot on the scroll is hit. But if you want it to be scrubbed instead, you could do that too very easily: https://codepen.io/GreenSock/pen/YzMGJzx?editors=0010 Lots of options!

Yeah, you totally don't need to use React. Quite the contrary. The "solution" they offered there has absolutely nothing to do with useLayoutEffect() - it's the sentence after that in the article: So it's the data-speed attribute that was doing it.

It's impossible for us to troubleshoot by just looking at an excerpt of your code - if you'd like some help, please provide a minimal demo (like a Stackblitz or CodePen) that clearly illustrates the problem. The error you're talking about definitely means that you haven't registered ScrollTrigger -or- you have a typo in your code (like your first code excerpt showed the wrong capitalization).

Yep, it looks to me like logic issues in your code, most likely this: `-=${images.length * 0.475}` Not sure what you're trying to do there, but it's causing overlaps as well as negative startTime values which must get converted (you can't have tweens in a timeline that start BEFORE the start of the timeline, so they simply get adjusted forward along with anything else in the timeline at that time so that no children start before 0).

It won't hurt anything to leave that in there, and it shouldn't be necessary in future versions. I'd just leave it. I don't think invalidateOnRefresh: true was ever needed in your animation because you don't have any dynamic tweening values anyway.

This thread might help because I created a helper function that'll let you wire up a video to a GSAP timeline:

Happy to help! 💚

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.

Just to clarify, GSAP is more capable than it has ever been - there was never a time when GSAP just automatically handled <canvas> draw operations for you. It can animate literally any property of any object (not just DOM elements), so you could do it this way: https://codepen.io/GreenSock/pen/OJGXKwZ?editors=0010 Enjoy!

Just to clarify, it's reversed: true, not reverse: true 🙂

I've tested on my Mac and I don't see what you mean, sorry. Your code seems quite inefficient to me. This is a bit better, although it could be further optimized: https://codepen.io/GreenSock/pen/xxeOjLZ?editors=1010 Make sure you overwrite previous tweens so you're not continually creating new conflicting ones that are fighting for the same property. And a modifier is better than an onUpdate for what you're doing. Are you saying that when you scroll all the way to the bottom of the page, you want your x animation to suddenly stop? Does it work the way you want if you REMOVE Lenis? That's not a GreenSock product, so we can't really support that. I think the whole point of Lenis is that it'll smooth the scroll so that it doesn't suddenly stop, so I wonder if what you're asking is more of a Lenis question, not a GSAP one(?)

Yeah, that was an issue specific to rem units and it should be resolved in the next release which you can preview at: https://assets.codepen.io/16327/gsap-latest-beta.min.js (you may need to clear your cache). Sorry about any confusion there.