GreenSock

Yeah, this sounds pretty odd - are you absolutely positive that the SplitText.min.js file is successfully loading BEFORE you try referencing SplitText? Just as a test, maybe you could try delaying your code that references GSAP, sorta like: setTimeout(() => { gsap.registerPlugin(ScrollTrigger, TextPlugin, SplitText, MorphSVGPlugin); // ... more code ... }, 5000); // <-- wait 5 seconds The goal is to just see if waiting long enough to ensure the files have all fully loaded makes it work. I'm also curious what this shows in your context: console.log(gsap.core.globals().SplitText); // ?? It sure sounds like it's either not loading the file at all, or you're trying to reference it before it's loaded, or there's a very strange scoping issue. Super difficult to troubleshoot blind though. Do you have a link to a URL that shows the issue?

Just to be clear, GSAP doesn't change ANYTHING when a device is in low-power mode; the problem here is that iOS devices suddenly slow down JS execution (the frame rate in particular, like requestAnimationFrame()) significantly when in low-power mode. The device is doing that, and GSAP has no way of forcing it back to normal performance levels. It's not a limitation of GSAP; it's a browser-forced issue.

Yeah, the directional rotation shortcuts like that are just for DOM elements but you're using a Three.JS target. You could probably use this plugin: It's a fundamental issue of forcing the animation to a different number that's rotationally closer or further linearly. I hope that helps.

Hm, that definitely sounds like bugs in the Telegram browser, like it's not properly reporting the scroll position or something like that. Unfortunately there's not much we can do to fix bugs in their browser, but we'd encourage you to report the bug to them. It looks like this is the spot maybe?: https://bugs.telegram.org/ According to that site, there may be over 29,000 Telegram browser bugs reported at this point. 😳 If they isolate an issue and want to collaborate with us on something related to GSAP tools, we're certainly open to doing that. 👍

@JohnMichael nothing has really changed as far as we know. If you're having trouble, please post a minimal demo, like a project file that very clearly shows the issue and we'd be happy to try to help, but please keep in mind that Adobe Animate is a 3rd party tool that we can't directly support. But GSAP is pure JavaScript and can work in pretty much ANY environment. Just load the core file and you should be able to animate. You might want to check with the Adobe community about how to configure the Adobe tools to load JS libraries and execute JS code.

ScrollSmoother is built ON TOP of ScrollTrigger. You need to register them both. If you only register ScrollSmoother, it's trying to use stuff in ScrollTrigger which hasn't been registered, thus it's problematic.

I don't think I've ever seen that before and it's pretty much impossible to troubleshoot without a minimal demo (like a CodePen) that clearly illustrates the problem. It almost looks like you must have some code somewhere that's messing with an object's prototype which is generally a very bad idea. If you'd like more help, please provide a minimal demo and we'd be happy to take a peek.

No, that's in CSSPlugin. There isn't a clean API to allow that sort of thing for just any generic object. It's relatively straightforward to do with external functions like what I provided above. Or you can build your own custom plugin or effect.

You can access this logic directly on rotational tweens of DOM elements, yes. Like: gsap.to(".box", { rotation: "35_short" // short means in the shortest direction. _cw would be clockwise, _ccw would be counter-clockwise }); Is that what you're referring to?

That is the correct behavior because 0 is closer to 0.1 than 6.28. The problem is you're trying to factor in rotational data. That requires very custom logic. As a courtesy, I put together a helper function for that: function rotationalSnap(value, valuesArray, useRadians) { let getChange = (v) => { let cap = 360 * (useRadians ? Math.PI / 180 : 1), change = (v - value) % cap; if (change !== change % (cap / 2)) { change += (change < 0) ? cap : -cap; } return Math.abs(change); }, distances = valuesArray.map(getChange); return valuesArray[distances.indexOf(Math.min(...distances))]; } https://codepen.io/GreenSock/pen/RwzJOJB?editors=1010 I hope that helps.

Yes, we sent you a response 2 days ago. Perhaps your spam filter gobbled it up? I just checked and it was indeed sent out to you. I'll PM you a message with details.

Sure, we keep adding cool sites to the showcase: https://gsap.com/showcase/ The summary videos are released around the end of each year.

Excellent! Thanks for letting us know. And thanks for being cautious about allowing non-members access to the bonus plugins. 💚

It sounds like that might be problematic. I'm curious why you want to include your package-lock.json file. I wouldn't think that's a good idea. We're experts at GSAP around here, but not so much the inner workings of build tools and NPM.

A few things... You should NOT be using the <body> as the #smooth-content. As the docs indicate, for ScrollSmoother to do its job, it must have everything in one content element which is inside a wrapper element. Neither of those should be the <body> (which is what it looks like you're doing). ScrollSmoother is built on top of ScrollTrigger. One of your screenshots showed you loading ScrollSmoother but NOT loading (or registering) ScrollTrigger which definitely cannot work. I'd recommend setting things up the way the docs show: <body> <div id="smooth-wrapper"> <div id="smooth-content"> <!--- ALL YOUR CONTENT HERE ---> </div> </div> </body> You are welcome to use Stackblitz instead of CodePen if that's easier for creating a minimal demo that clearly illustrates the issue. Here's a React template, for example: https://stackblitz.com/edit/react-cxv92j