GreenSock

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.

Yep, exactamundo. Imagine laying those tweens out on a timeline. Just think where each one's start time would be. Happy tweening!

Yep, that's because the default duration is 0.5 (you didn't set a duration, so it uses the default). Therefore, if each one animates for 0.5 seconds, and you stagger their start times by 0.5 seconds, that means they'd be perfectly sequenced. If you set the duration to 1 second, then you'd need a stagger of 1 to have them perfectly sequenced. See how it works? And yes, when you set scrub: true on a ScrollTriggered animation, it just squishes/stretches it to fit perfectly between the start and end scroll positions. I hope that clears things up.

It's a protection against scroll-behavior: smooth which messes things up. Some CSS libraries apply that, so we're overwriting it. In order for ScrollTrigger to do its magic, it must temporarily set the scroll position of the page back to the top (0), do all of its calculations and pre-optimize, and then restore the scroll position (it's invisible to the user), but if you apply scroll-behavior: smooth, that basically prevents that from working. It's sorta like setting a CSS transition to a value that GSAP animates - the CSS transition intercepts the value application and says "NOPE! I won't allow that right now...I'll drag it out over the course of a certain duration". In short, it's protecting you 😉

Yeah, that choppiness has nothing to do with GSAP - welcome to the world of Safari rendering problems. Safari is notorious for really bad rendering problems, sluggishness, and odd behavior. You might want to consider animating PNG images with transparency rather than SVG because you're putting a LOT of pressure on the CPU for fabricating all those pixels. Raster images are much easier for the browser to push around.

I figured it out. It has to do with the order that things get refreshed. ScrollSmoother forces ScrollTrigger.sort() to get called which orders things by the ScrollTrigger's start value which is a decimal for any ScrollTriggers with containerAnimations. So all you really need to do to fix it in the current version is to explicitly set a lower refreshPriority on the containerAnimation ones: https://codepen.io/GreenSock/pen/JjVKrEO?editors=0010 (I set refreshPriority: -1) 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) Does that clear things up for you?

No, that's not a bug because in your non-working example, you're executing the random function ONCE and baking that into the string which is what's used in the tween. Think of it like this: // bad x: "+=10.2142" // the result of "+=" + gsap.utils.random(...) // good x: () => gsap.utils.random(...) // the randomizing function gets called every refresh It's just a logic/JavaScript thing, unrelated to GSAP.

We usually don't code a custom solution for you in these forums, but I knew how to do this and figured it'd be fun challenge, so here you go: https://codepen.io/GreenSock/pen/PogzKNO?editors=0010 Is that what you're looking for?

I see what you mean, @Umberto and I'm looking into it. I'll post back when I have answers/suggestions, but it may take some time.

By the way, this is not a good idea: tl1.to(".box", { rotate: "45deg", transform: "scale(40)", ... }) rotate is a transform-related property, and you're telling it to animate to a specific transform of scale(40) which doesn't include a rotation. It's almost never a good idea to animate the literal "transform" property. Instead, you should use the individual components: tl1.to(".box", { rotation: 45, scale: 40, ... }) That's faster and more reliable.

Also, I looked at that link where the claim was made that the GSAP package was "broken" but I don't think that's quite a fair assessment. The GSAP package has to accommodate both ES Modules AND CommonJS (UMD) ones. We can't just set the "type" in the package.json to be commonjs or module or else it'll break probably thousands of people's repositories. It's not one or the other. If anyone has a solution to make it all work for both without breaking people's repositories, I'm all ears! But like @Rodrigo said it seems to work fine if you import from the correct spots. Perhaps we're missing something, but we know that other Sveltekit users are able to leverage GSAP quite a bit with no problem at all. I'm not a Sveltekit guy, sorry. 🤷‍♂️

Is that working for you? If so, great. It doesn't seem to me like it'd solve everything, but if it works for you then who am I to argue? 🙂 I doubt you really need that ScrollTrigger.refresh() in that setTimeout().

@Torben you published a public NPM package that uses members-only plugins? Yikes. 🫣 What would you expect to happen if a random person installed your package? It shouldn't be able to leverage those plugins of course. So yeah, this would all depend on your having your local .npmrc file set up properly so that it accurately resolves that repository to the npm.greensock.com one and passes along your token. And you're absolutely right about making sure you don't put that in your repository because it'd have your token in there which should never be shared.

Yes, that's exactly what I was saying. Any selector text used in GSAP-related stuff created while the useGSAP() hook function is executing will be locked to that scope. So it's fine if it's in external functions as long as those are called while that useGSAP() hook function is executing.

You can just use a variable to track the open/closed state: https://codepen.io/GreenSock/pen/bGJpzGP?editors=0010 Spam-click as much as you want! 🙂

You could think of it that way, yes. But position: sticky has limitations that ScrollTrigger's pinning doesn't. If it works in your particular scenario, great! Use it.