Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

GreenSock last won the day on July 24 2019

GreenSock had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by GreenSock

  1. There are a bunch of ways you could do this, and I'm not quite sure which effect you're after but here's a fork that might be close: 

    See the Pen 321d558bd58fe43f7083a29aab813bb2 by GreenSock (@GreenSock) on CodePen


    Basically, you can just create your animations linearly, but then actually tween the playhead of the main timeline in a way that has an ease! 


    If, on the other hand, you actually want to keep the fading durations consistent (so each one fades at exactly the same rate, but you're only accelerating the duration of the text staying opaque), that's a whole different beast (more complex, but doable). Just let us know exactly what effect you're going for and we'll see what we can do. 


    If you're merely looking to accelerate the staggers themselves, you'll love the new advanced staggering feature that was added in GSAP 2.1. Read about it here: 

    See the Pen jdawKx by GreenSock (@GreenSock) on CodePen


    I hope to see your name on the membership roster soon ;)

    • Like 4
  2. Hi Rich. This sounds more like a Flash/Animate CC question than a GSAP question. I'm not very familiar with how that software exports videos these days but I wouldn't be surprised if it doesn't really honor script-based updates. I'm sure there are tools out there that can take a SWF and convert it to video, but I'm not familiar with them, sorry. Maybe someone else around here knows. 


    If you have any GSAP-specific questions, we'd be happy to help. 

    • Like 2
  3. Welcome to the forums, @Thinkingbox Developer. Sorry, but it's really tough to troubleshoot blind and this doesn't really sound like a GSAP issue. I'm not a Webpack guy, nor do we support the 3rd party gsap-promise library, so I'm not quite sure how to help here. Oh, and by the way, I'd strongly recommend using the yPercent:110 instead of y:"110%" format to be explicit about percentage-based values. That's totally unrelated to the issue you posted about, of course. 


    Are you using the latest version of GSAP? And did you install it from NPM? 

    • Like 3
  4. I'm not sure I totally understand the effect you're after, but your code does look like it alternates between things properly. But if your objects are on top of each other, you can just fade the TOP one in and out (no need to do anything to the other one). See what I mean? Here's a demo with your original solution as well as an alternate with them on top of each other: 

    See the Pen ba21de611a64c80765c74e7c03f31415?editors=0010 by GreenSock (@GreenSock) on CodePen


    Does that help at all? 

  5. I'm not quite sure what it's supposed to look like, but perhaps the problem is that you've got TWO paths inside the <clipPath>, but you don't want/need the "#morphTo" in there. In other words, it's using both of those paths for clipping simultaneously. You could just drop the "#morphTo" inside a <defs> or you could feed the string in directly. Either way. Is this more like what you wanted?:


    See the Pen 085ba2d7914407e064c8be254f971af6 by GreenSock (@GreenSock) on CodePen

    • Like 1
    • Thanks 1
  6. Glad to hear you got a solution. 


    Unfortunately, that solution isn't at all what I was suggesting, and there seem to be some issues with the theory and math in there but I just don't have the time to troubleshoot it all or deliver a smoothed-out one. This is definitely beyond the scope of the kind of GSAP-specific help we offer in these forums. If you still need some help on a consulting basis, feel free to PM me. Or maybe someone else has time to dig in and craft a solution for ya. Congrats on getting this far, though! I know it's a tricky challenge :)

  7. Welcome to the forums, @mrrobot993. We'd be happy to help with any GSAP-specific questions here, but we just don't have the resources to analyze a live site and then develop full tutorials explaining how they achieved a particular effect. Was there a GSAP question we could answer for you? 


    Happy tweening!

    • Like 1
  8. Nice job @Visual-Q


    If you want to respect easing, you could just use this.ratio instead of tween.progress():

    TweenMax.to('.img-wrapper', 5, {
      width: 1,
      modifiers: {
        width: function() {
          return ('calc(' + (this.ratio * 100) + '% + ' + this.ratio * 4 + 'rem)');



    • Like 3
  9. I like the SteppedEase approach, but if you really need to limit the entire update of a tween to a certain FPS, you could do something like this: 


    See the Pen 2b4554531b20a9876dac381beea741e2 by GreenSock (@GreenSock) on CodePen


    Here's the utility function I whipped together, so you can just pass a tween/timeline instance in, along with the desired FPS, and it'll do it all for you: 

    function throttleAnimation(animation, fps) {
      var ticker = TweenLite.ticker,
          time = ticker.time,
          frameLength = 1 / fps,
          frame = 0,
          update = function() {
            var newTime = ticker.time - time,
                newFrame = ~~(newTime / frameLength);
            if (frame !== newFrame) {
              frame = newFrame;
              if (animation.progress() === 1) {
                ticker.removeEventListener("tick", update);
      ticker.addEventListener("tick", update);


    Does that help? 

    • Like 3
  10. Are you trying to make the black dot go to each colored dot in a linear or a curved path? I'm trying to figure out why you're using BezierPlugin. 


    First, a few notes about why your current codepen wasn't working:

    1. It doesn't make sense to "correlate" the progress in there. correlating is for positional values like x, y, z or top, left where the measurements must factor in them all. Like the distance between two points is the diagonal between the x,y and x,y points. So don't add "progress" in that list.
    2. You mixed x, y, and progress in every object in the bezier, thus you were literally telling GSAP to try setting a "progress" value on the element itself (along with x and y). Obviously the DOM element doesn't have a "progress" value, so that won't work :)
    3. Again, you were telling GSAP to set "x" and "y" properties of a timeline (along with progress). Timelines don't have x or y properties, so that can't work. 
    4. The progress value was animating correctly through each of those values, but they're weighted. In other words, think of an array of x,y points, some of which are very close together and some of which are far apart, and you ask BezierPlugin to animate an object along a path through those points - typically you wouldn't want it to split up the time EQUALLY between each point because that'd make it go really slow between the close points, and really fast between the far-apart points. See what I mean? So BeizerPlugin does a bunch of work to smooth all that out for you. Therefore, when you animated through the progress values, the same thing happened which is what made it SEEM linear. It was doing its job :) It sounds like you were expecting it to split the time equally. 

    If I understand your goal correctly (and I probably don't), it's definitely a non-trivial task but it's doable. You could plot a path (like an SVG) using the progress value and maps it to the proportional spot on the timeline, smooth it (to prevent jerky changes in speed) and feed that into a CustomEase. It's definitely beyond the scope of the free help we offer in these forums. If you still need help and would like to chat about hiring us on a consulting basis to help knock this out, feel free to PM me. Or perhaps someone else here wants to chime in with an answer (which would be great). 


    Good luck with the project!

    • Like 4
  11. 16 hours ago, Iamattamai said:

    Between your progress idea coupled with the _gsTransform nugget I created an external matrix converter for my purposes.


    Excellent. Glad to hear you figured out a solution. 


    16 hours ago, Iamattamai said:

    Seems the problem with my attempted implementation of your function above was with the reference to var tween, in case anybody else comes down this path.


    I'd still be happy to take a peek if you've got a reduced test case. Maybe I made a mistake somewhere in my code and I just don't see it right now. 


    16 hours ago, Iamattamai said:

    And Saturday support is WAY unexpected - you guys rock.




    Thanks for being a Club GreenSock member!

  12. 8 hours ago, Iamattamai said:

    Its throwing an error at the vars[p] = t[p] line thusly: Uncaught TypeError: Cannot read property 'x' of undefined


    Hm, is there any chance you could provide a reduced test case in codepen or something? I'd love to see what's going on in-context. 


    8 hours ago, Iamattamai said:

    GSAP evidently defaults to counter-clockwise.


    No, it doesn't default to any particular direction at all. It just tweens the values normally. So, for example, if you're tweening from rotation:20 to rotation:50, it'd go one direction, but if you're going from rotation:20 to rotation:-10, it'd go the other direction. 


    Again, I'd love to help once I can see a demo. It's just really tough to troubleshoot blind :(

    • Like 1
  13. Wow, that's pretty unusual for someone to be feeding in matrix values like that. The problem is that internally those matrices must be decomposed into the various parts like x, y, scaleX, scaleY, rotation, skewX, etc. so that they can be interpolated properly. If you've ever tried tweening the values inside of a matrix, you'll see how weird it looks whenever rotation is involved. 


    For directional rotation to be used, obviously you need to actually define a rotation value (not a matrix). So you need a way of busting apart that matrix. If you don't have your own method for doing that (it can get pretty complex), you could craft a reusable function that piggy-backs on GSAP's capabilities like this:


    //take a matrix, decompose it into each piece (x, y, scaleX, rotation, etc.) and make sure that rotation has the "_short" suffix to make it go in the shortest direction. The third parameter is optional - it's where you'd define all the other vars values like ease and whatever else you'd normally feed into your tween.
    function transformVars(element, matrix, vars) {
    	vars = vars || {};
    	var tween = TweenLite.to(element, 1, {transform:matrix}).progress(1),
    		t = tween.target._gsTransform,
    		props = {x:0, y:0, scaleX:1, scaleY:1, rotation:0, skewX:0},
    	for (p in props) {
    		vars[p] = t[p];
    	vars.rotation += "_short";
    	return vars;
    TweenMax.to(element, 2, transformVars(element, "matrix(-.45127661, -.10921767, -.09499633, .41718125, -40.591503, 187.74884)", {ease:Power2.easeInOut}));


    Does that help? 

    • Like 2