GreenSock last won the day on November 14

GreenSock had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by GreenSock

  1. GreenSock

    Option to use custom tag name in SplitText plugin

    Glad it worked well for you. I'm working on another enhancement to MorphSVGPlugin at the moment, so once that's done we'll probably push things out at that point. If you need something before then, just PM me and I'll hook you up Thanks for being "Business Green"!
  2. GreenSock

    Reverse a custom ease...

    When you say "play it backwards", you don't literally mean that, right? Like...the values starting at their end values and going backwards from there? Are you just talking about slicing the ease halfway through and kinda taking the way it eases out and redrawing that to be the way it eases in, and vice-versa? There isn't an automated way, no, but I assume you're aware that it's super easy to draw whatever ease you want in the Ease Visualizer:,0,C0.126,0.382,-0.164,0.5,0.5,0.5,1.166,0.5,0.818,1,1,1
  3. GreenSock – Shaky in Safari and Chrome

    I didn't notice any shaking. Hm. Oh, and I'd definitely recommend using scaleX:2 rather than attr:{transform: "scaleX(2)"}. Much faster.
  4. GreenSock

    onComplete fires before tween ends completely

    An onComplete fires the moment a tween finishes (as it should). I'm worried that if you think that's not happening and you're trying to add some extra time to "fix" it, you're probably missing the core problem. Sure, you could easily add a function call later in the timeline (wherever you want), or even just use TweenMax.delayedCall() with a specific time, but again, I'm concerned that you may be missing some core issue with what you've built and this may turn into more of a hack than a fix. I'd really like to help - I just can't imagine what the problem could be without seeing a demo. And this is definitely the right place to post a GSAP-related question like this. Absolutely. We welcome it.
  5. GreenSock

    React, Next.js and GSAP issues - possible fixes for SSR

    I'm worried that you're not reading my posts. Did you try the solution I offered? To avoid tree shaking, simply reference CSSPlugin DIRECTLY somewhere in your own code, like this: import CSSPlugin from "gsap/CSSPlugin"; const myPlugins = [CSSPlugin]; //<-- HARD REFERENCE IN YOUR CODE
  6. GreenSock

    onComplete fires before tween ends completely

    @iLuvGreenSock, are you saying that you cannot provide a reduced test case that shows it [not] working as you described? It doesn't help much to see a codepen that works perfectly. There must be something else in your code that you're doing differently when it's breaking. We'd love to help, but we just can't troubleshoot blind unfortunately.
  7. GreenSock

    Option to use custom tag name in SplitText plugin

    Sure, wanna give it a shot on codepen? Just use this URL: Is that what you were hoping for?
  8. GreenSock

    React, Next.js and GSAP issues - possible fixes for SSR

    @Anooj Mathew did you follow the directions about protecting CSSPlugin from tree shaking in your bundler? Did you reference it somewhere? If you still need help, please provide a reduced test case that demonstrates the issue. It's just very difficult to troubleshoot blind. I strongly suspect you've got a tree shaking issue going on.
  9. GreenSock

    React, Next.js and GSAP issues - possible fixes for SSR

    It sounds like maybe your environment isn't loading CSSPlugin (that's what applies the transforms to DOM elements in cases like this). Are you enabling tree shaking in your bundler maybe? If so, I bet it's dumping CSSPlugin (and it shouldn't). One solution is to just reference CSSPlugin directly in your code somewhere so that it doesn't get dumped, like: import CSSPlugin from "gsap/CSSPlugin"; const plugins = [CSSPlugin]; Does that resolve things?
  10. Um, I don't think so - whatever easing you have in the original timeline would be preserved. And if you want to tween the progress of the timeline with an ease, that's totally possible too using the last parameter of the tweenTo()/tweenFrom()/tweenFromTo() method. Maybe I misunderstood what you meant, though. Feel free to post a different demo if you still need some help. This should be entirely possible.
  11. Does this help?: Basically I made a function for you: function scrubTimeline(tl, from, to, wrap) { if (wrap) { //tween "from" to the end, then jump to the beginning and tween to the "to" position return new TimelineLite().add(tl.tweenFromTo(from, tl.duration())).add(tl.tweenFromTo(0, to, {immediateRender:false})); } return tl.tweenFromTo(from, to); } By the way, are you aware of DirectionalRotationPlugin? Might be helpful. You may not need to use complicated timeline setups. Another idea is to use ModifiersPlugin and just tween a value that you plug into the progress or time value on the timeline, but you can allow it to go past adjust it on-the-fly. Like, if you tween from a time of 10 to 20 on a timeline that's only 15 seconds long, you'd take the variable and do % 15 on it so that it just wraps very simply. You could do that with an onUpdate as well. There are many was to accomplish it actually - I don't want to overwhelm you I figured the function above is probably the most intuitive for most people. Happy tweening!
  12. Welcome to the forums, @Mmagic. I noticed a few problems... In your "restart()" function, you were looping through all the child animations and calling "restart()" on each instance, which basically rewinds them immediately, putting them back at their starting state. When you're using "from()" tweens, that means they'll all be at their "from" values at that point. And then you're creating all the from() tweens again...from those same values! In other words, x is 500 and you're tweening x to 500 (no change). That's why it looks like nothing is happening. It's just a logic flaw in your code. That's the most common mistake when people use "from()" tweens - they often forget that it uses whatever the current values are as the destination values which can cause logic problems (not a bug in GSAP). Imagine clicking a button really fast - if the user clicks when the current tween is partially finished, the current (destination) values are now different than the originals. It can get messy. Of course you can use fromTo() if you need to specify both starting and ending values. It's totally fine to use from() - it's just important to keep in mind how they work. Also, if you're trying to clear out a timeline... //BAD / WASTEFUL: TL.getChildren().forEach(tw => { tw.restart() tw.kill() }); //GOOD: TL.clear(); Also, you do NOT need to reuse timeline instances. It's not wrong/bad, but I often find that it's easier/faster to just create a new instance each time in cases like this. It probably takes more resources to scrub all the old stuff out rather than just creating a new one. Remember, GSAP is highly optimized for speed and it releases things for garbage collection on its own. Lastly, you could consolidate this code: //LONG: const tween = TweenMax.from(".wrapper", 10, { x: 500, ease: Power0.easeNone }); TL.add(tween, 0.5); //SHORT: TL.from(".wrapper", 10, { x: 500, ease: Power0.easeNone }, 0.5); Happy tweening!
  13. GreenSock

    Easing depending on distance, not time

    @OSUblake is right on, of course. And if you simply want to remap a wider/narrower x/y range to another, here's an example of using a tween's progress accordingly: That's not really what I'd use for an eye-following thing because it's not actually measuring things with true angles from the center of a circle (so it goes off the edges at the diagonals), but I was trying to keep things as simple as possible to demonstrate the concept. You basically create a tween for the x-axis and another for the y-axis and that goes from left to right (or top to bottom) and then simply remap the ratios, like if you're basing it on the mouse position across the whole screen width/height (or whatever). Of course you could tween the progress of another tween too if you want things to animate/ease to the new position. If you need help with that, let me know. Happy tweening!
  14. GreenSock

    talk about guage

    Yeah, I read the post at least 5 times and I'm lost. We'd love to help, but like @Rodrigo said, a demo would REALLY help. As for how easy something would be in GSAP, it'll pretty much handle any animation task you throw at it. Just keep in mind that it's an animation library - it's not an app framework or anything like that. Happy tweening!
  15. GreenSock

    CSSRulePlugin not available through npm?

    Hm, it sounds like you're doing this: //BAD: import { CSSRulePlugin } from "gsap"; //GOOD: import CSSRulePlugin from "gsap/CSSRulePlugin"; If I'm wrong, would you please post the EXACT import statement you're using? Or even better, a reduced test case that we could run? Also, what version of GSAP are you using? Hopefully the latest (2.0.2)
  16. GreenSock

    CSSRulePlugin not available through npm?

    First of all, welcome to the forums (and GSAP), @madleo. I'm not quite sure what you mean by "CSSRulePlugin does not seem to be made available." Are you importing it like this?: import CSSRulePlugin from "gsap/CSSRulePlugin"; Or if you prefer, you could do this: import { CSSRulePlugin } from "gsap/all"; Does that help?
  17. GreenSock

    Splittext error in console - What am I doing wrong?

    Yep, I think @PointC is exactly right. And to be clear, the file you're using is written as an ES Module. Most modern browsers accommodate those, but you have to add type="module" to the <script> tag. It's probably easiest to just point your <script> tag's src to one of the minified files instead, which aren't ES modules (they're in plain ES5 format). Thanks for being a Shockingly Green member! Happy tweening!
  18. GreenSock

    Moving Multiple Elements Repeatedly

    Nice work on the video, @Sahil!
  19. GreenSock

    Image Slice Slider With Gsap

    Perhaps it would be appropriate to hire an expert to help you out. Or analyze the source code to see what they did? Good luck with the project.
  20. GreenSock

    Image Slice Slider With Gsap

    Hi @Raydoan. Welcome to the forums. Unfortunately, we just don't have the resources to analyze a live site and then tell you exactly how to reproduce it on your own. That's a big task. If you have a specific question about GSAP or its API, we'd be happy to help. Typically you will get the best results here if you post a reduced test case as a codepen example so that we can see what you're doing and troubleshoot accordingly. Happy tweening!
  21. GreenSock

    play individual targets list

    So you need to control each individual tween separately? They don't all animate at the same time to the same values? If that's the case, then you'd need a tween instance for each. Otherwise, just use a single tween and feed an array in as the target. And I don't see any reason to create all the tweens at once - you can just create them when you need them to run. Also, you can cache a single instance of Elastic.easeOut.config(1.2, 0.2) instead of calling that method again and again for each one. Config once, and reuse for all the tweens. invalidate() just erases any starting values that were recorded internally, forcing it to re-analyze/record the starting values on the next render. I'd strongly recommend against directly accessing any "_" prefixed properties like _duration because those are for internal use only. The proper way to set those is through the getter/setter, like tween.duration(newDuration). Like @Dipscom said, though, it's very unlikely that any performance problems are related to GSAP directly - it's typically something in the rendering pipeline that's the culprit. If you still need help, it'd be great if you could create a reduced test case in codepen that demonstrates the issue. It's just very difficult to troubleshoot blind (or just glance at an excerpt of the code). Happy tweening!
  22. GreenSock

    timeline won't pause (nor pause() or paused(true)

    Howdy @flowen. Please follow @Rodrigo's advice and also we'd appreciate it if you didn't post the members-only plugins in public github repos because that makes it super easy for people to steal without getting the proper membership/license. Thanks a bunch! You can use the special trial versions of the bonus plugins listed here: and they'll work on too. Happy tweening!
  23. Yep, I noticed the same thing as @PointC. Also, be careful about the fact that data attributes are always TEXT (strings) rather than numbers, so you may have to cast them as such. The easiest way I've seen is to simply add a "+" as a prefix. Happy tweening!
  24. GreenSock

    TweenAlign and appendMultiple

    I hear ya. CustomEase is about 2.5k minified and gzipped. CustomWiggle adds 1.2kb (because CustomEase is a dependency). But actually, all CustomWiggle does behind the scenes is create what's essentially a wiggly SVG <path> (based on the parameters you feed in) that gets fed into CustomEase, so if you need to minimize file size you could create the CustomWiggle locally and have it spit out the raw SVG <path> data string, copy that, and just plug that directly into CustomEase for your production files (removing CustomWiggle as a dependency). And don't freak your team out with the whole "appendMultiple() is deprecated" thing because the next major release won't drop for months. It's not looming on the horizon super-soon. But yeah, I think they'd be happier using the modern syntax anyway. Oh, and if you wanted to get really fancy, you could reduce those 11 lines of code to just 1: tl.staggerTo([steering, steering, steering], 1, {cycle:{rotation:[-20,20,0]}, ease:Sine.easeInOut}, 1, 2); Let us know if you need anything else.
  25. One workaround is to pause the useFrames:true timeline, set globalSync:false on the GSDevTools instance, and specify that timeline as the animation like this: Then at least you can use the scrubber properly. As for your task of porting a frames-based animation in, there are a bunch of ways you could approach that actually (without useFrames:true). For example, build it as if 1 second = 1 frame (just to make the numbers easy) and then adjust the timeScale() to 30 to make it play at that rate. In other words, put all your animations in a timeline instance and alter the timeScale on that timeline. Or if you've got things that must jump in whole increments (like exactly 30 discrete steps rather than smooth interpolation), you could actually use the same technique as above, but then pause() the timeline and animate its time using a SteppedEase so that it's literally jumping at the proper increment across that timeline's progress. The nice thing about building it in the "normal" fashion (rather than useFrames:true) is that you get resolution-independence time-wise, meaning smooth interpolation that runs at the same speed no matter what device. With frames-based animations, if there's a slowdown during complex sequences and frames are dropped, that means EVERYTHING takes longer. So a 1-second animation might actually take 2 or 3 seconds (only if it's under a lot of stress of course). With time-based animations, they'll just jump to the appropriate spot and drop frames to keep up. Generally that's a good thing. There's tons of flexibility built into the system, so hopefully it's relatively easy for you to accomplish whatever you want. Let us know if you need anything else.