GreenSock

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.

Sorry, but that's not what MotionPathPlugin does - it can't just automatically stretch and rotate the path such that it perfectly touches two elements. It follows the path you provide. So if you want that path to be different, you'll need to adjust your path. If you want help writing code that could do that stretching/rotating, we do offer paid consulting services. It's well beyond the free help we can provide in these forums. Good luck with the project!

Hi @Destro. I read your question a few times and I really don't understand what you're asking. "Adding keyframes to div's"? If you'd like some help, please make sure you include a minimal demo, like a CodePen or Stackblitz, and we'd be happy to take a peek and answer any GSAP-specific questions.

Have you tried ScrollTrigger.normalizeScroll(true)? Or you could use ScrollSmoother. The fundamental problem is that most modern browsers handle scrolling on a completely different thread (not synchronized with the JavaScript thread). So imagine scrolling quickly, such that on the very next tick the page would be 100px higher. The scrolling thread says "okay, I'm gonna render the page 100px higher" (and it does so), and then a few milliseconds later, the main JS thread executes and ScrollTrigger does its thing, saying "alright, now we've passed where that element should be pinned, so let me pin it..." and now you see that element correct itself to be pinned in the proper place. It's not as if it's a bug in ScrollTrigger or anything - it's a fundamental problem with how browsers do scrolling on a different thread and pre-render those scrolling results BEFORE the JavaScript executes. So if you see a site where that doesn't happen, it's almost surely because it is PREVENTING the native scroll, and it's doing EVERYTHING (including scroll) on the main thread. It listens for wheel/touchmove events in a non-passive way and calls preventDefault() on them, and then does the actual scroll via JavaScript instead. That's what ScrollTrigger.normalizeScroll(true) does, and ScrollSmoother of course.

No no, you don't need to do that. This is completely invalid: const homeIntroSubTitle = `${mainRef.current} .home__intro h2`; Because you're having JavaScript convert mainRef.current into a STRING. Try to console.log() what you're getting there and you'll see what I mean - that's not a valid selector string. Since you defined your scope as mainRef, that's all you need to do - GSAP will automatically scope things so that it only selects DESCENDANTS of that element which it looks like you were trying to do in a roundabout way in your selector text concoction. So for example, you'd simply change it to: const homeIntroSubTitle = ".home__intro h2"; That's because your function is running WHILE the useGSAP() hook function is executing, so all selector text is scoped accordingly during that execution. If you're still having trouble, please provide a minimal demo so we can see what's going on.

Yeah, totally. You're fine with the standard no-charge license based on the usage you described, @aashu007 To be clear, if you answer "yes" to any of the following, you'd need the special commercial license that comes with "Business" Club GSAP memberships: 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) Are you using GSAP in a game/app with optional paid features/upgrades? If your website sells products that aren't GSAP-enhanced like clothing, widgets, food, etc. (IT services sounds like it'd fit in that list), that doesn't require the commercial license. It only matters if the thing for which a fee is collected uses GSAP in some way. The standard "no charge" license even covers usage in projects where only a one-time development fee is charged, like an agency that's paid to build a fancy web site that's free for everyone to use. We like to think that a Club GSAP membership pays for itself very quickly when you consider all the time it’ll save, the added capabilities that the bonus plugins deliver...and of course that sense of having animation superpowers is priceless 🙂 Club GSAP memberships support all the ongoing development here as well, so it can be a smart way for you to help ensure that the tools continue to get nurtured in the years ahead just like they have been for the past 15+ years. But please don't feel any pressure to join for that reason. I hope that clears things up for you. Enjoy the tools, and good luck with the new site and your business! 💚