GreenSock last won the day on November 14

GreenSock had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


GreenSock last won the day on November 14

GreenSock had the most liked content!

Community Reputation

6,711 Superhero

About GreenSock

  • Rank

Contact Methods

Profile Information

  • Gender
  • Location
    Chicago Area
  • Interests
    Volleyball, Basketball, Christian Apologetics, Motorcycling

Recent Profile Visitors

46,428 profile views
  1. First of all, thanks for providing a reduced test case! Very helpful. It sure looks to me like you are. Your code is building a timeline and then calling reverse() but the playhead is at the very beginning (time:0) at that point, so nothing is really gonna happen if you reverse() it because that just tells the playhead to go back toward the start (...but it's already there in this case). See what I mean? Did you want it to jump to the end and reverse from there? You could dl.progress(1).reverse(). Or the super-secret short way is simply dl.reverse(0).
  2. GreenSock

    Fullscreen sliders horizontal and vertical

    Very slick, @PointC. Thanks for sharing and for being such a central part of the GreenSock community. No doubt these demos will serve people well.
  3. GreenSock

    Custom Ease vs Bezier vs Bigger Timeline Performance Question

    I didn't see any problems with it. The only other thing you could consider doing to optimize performance (though probably not significant) is to batch all your canvas drawing into a single onUpdate that sits on your timeline (or a TweenLite.ticker.addEventListener("tick")) instead of an onUpdate in every tween. But again, we're probably splitting hairs here. @OSUblake is our resident canvas expert, and @Sahil has been diving in lately too, so those guys may have other advice.
  4. 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"!
  5. 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
  6. 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.
  7. 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.
  8. 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
  9. 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.
  10. 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?
  11. 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.
  12. 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?
  13. 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.
  14. 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!
  15. 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!