GreenSock last won the day on January 19

GreenSock had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


GreenSock last won the day on January 19

GreenSock had the most liked content!

Community Reputation

6,968 Superhero

About GreenSock

  • Rank

Contact Methods

Profile Information

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

Recent Profile Visitors

46,745 profile views
  1. GreenSock

    TransformManager[as3] to JS[TypeScript | createJS]

    Welcome to the forums, @DivisionBoy. I must admit I feel pretty weird about this. I can't find any record of you purchasing TransformManager (maybe under a different account?), but the most concerning thing is that it sounds like you're taking copyrighted code and porting it without permission and then asking us to help you do it. Do you mind me asking where you got TransformManager to begin with? And are you planning to share this TypeScript version publicly or just for your own use? This isn't something I feel comfortable helping you with, sorry. These forums are free primarily because of our licensing model which entails people paying for certain tools (like TransformManager).
  2. GreenSock

    Troubles with variables when tweening

    Nah, no worries. I've done stuff like that plenty of times. It happens to all of us. Happy tweening!
  3. GreenSock

    Troubles with variables when tweening

    Looks like you just declared your variables AFTER you called the function that tried to access them. Declare the variables first and you should be fine 👍🏻
  4. GreenSock

    Missing frames after addPause callback resumed

    This is certainly an edge case, but I do see an issue that seemed worthy of fixing. Here's the most reduced test case I could come up with to illustrate/test: function test() { var released = false, tl = new TimelineMax({onUpdate:function() { if (released) { if (tl.time() > 0.8) { console.log("FAILED!") } else { console.log("WORKS!"); } released = false; tl.pause(0).kill(); TweenLite.ticker.fps(null); } }}); TweenLite.ticker.fps(2); tl.addPause(0.0001, function() { setTimeout(function() { released = true;; }, 500); }).to({x:0}}, 2, { x: 1000 }); } test(); This should be resolved in the next release which you can preview (uncompressed) at: Better?
  5. GreenSock

    immediateRender demystified doc extend with set

    Yeah, that was actually by design. I found this comment in my own code: Also, to be clear, immediateRender:true does NOT mean that every time you rewind the parent timeline, those values will immediately render no matter where the child animation is placed on the timeline. immediateRender is only for literally the first render, when the animation is created. Does that clear things up? Is there something you can't accomplish with the current API?
  6. GreenSock

    Child TimelineMax within a Parent TimelineMax

    You can certainly add repeating timelines (or tweens) to any timeline. No problem at all. Nest things as deeply as you want. I had a hard time understanding what you were describing with the "interesting behavior" - can you post a codepen demo? Your sample code had several mistakes. Like you were adding tlr to mainTimeline regardless, but you were only populating that variable inside on condition, so that code would break in the other condition. And I'm not sure what "self" refers to, but there's no getDelay() method in any GSAP stuff. Keep in mind that if you've got a child animation that repeats 99 times, its parent will wait for ALL of those to finish before it repeats. See what I mean? If you still need some help, just post a codepen demo and we'd be happy to take a peek. Happy tweening!
  7. GreenSock

    Inspiring HTML5 Banner Examples with GSAP

    Nice work, @ryanrabon!
  8. GreenSock

    staggering data from multiple arrays?

    Yeah, sorry, I'm a little lost especially without a demo. It kinda sounds like you're asking a data structuring question rather than a GSAP-related one. (?) The solution I gave you actually does seem like it'd accomplish what you're after. But maybe I'm misunderstanding. You need to add another numeric parameter to your staggerFrom() calls (at the end) to control where they start getting inserted into the timeline. Perhaps the stagger amount is "1" (because you wanted 1 second inbetween each individual customer) and then the position parameter for the 2nd staggerFrom() would be something like 0.1, and then the position parameter for the 3rd staggerFrom() might be 0.2. That way, the customer marker animates first, quickly followed by the client marker, and then finally the line...and then it starts again for the next customer marker, and so on. If you still need some help, please provide a reduced case in codepen so we can see what you're working with. The less code the better
  9. GreenSock

    staggering data from multiple arrays?

    Welcome to the forums, @UnioninDesign! If I understand your question/goal correctly, all you'd need to do is add the position parameter to your 2nd and 3rd staggerFrom() calls so that they are positioned in the timeline properly. By default, animations are always sequenced one-after-the-other. So, for example, if you've got 100 elements that each animate for 1 second, but they're staggered by 0.1 seconds, that means that the last one would finish at 11 seconds (0.1 * 100 for the stagger, plus 1 second for the animation itself). So if you do another staggerFrom() call after that, it's gonna start at 11 seconds. But in your case, it sounds like you want that second staggerFrom() to start much earlier. Perhaps 0.2 seconds after the very first stagger. No problem! Just add 0.2 as the position parameter to tell it to start that stagger at exactly 0.2 seconds into the timeline. Done. More about the position parameter: Another option is to build a function that handles all of the animation for just ONE chunk, and then loop through however many elements you have and feed them to that function which then spits back a TimelineLite which you can nest into a master timeline in a staggered fashion. This is slightly more advanced, but once you get the hang of how to do this kind of thing, it can make your animation code much more intuitive and unencumbered. For more about that, read this article: Happy tweening!
  10. GreenSock

    TranslateZ stacking only working correctly in Safari

    Nice work! If you're not even a programmer, then my hat's off to you Happy tweening!
  11. GreenSock

    TranslateZ stacking only working correctly in Safari

    I'd probably use ModifiersPlugin to replace your onUpdate because it's more performant than creating a new set() tween on every single update of every element. And I didn't understand why you were creating paused tweens and then using another tween to tween a progress of 3 (remember, progress can only be between 0 and 1). Here's a cleaned-up version: Does that help?
  12. GreenSock

    Ken burn effect with text and background-color

    Welcome to the forums, @RyRInfo! And thanks for being a Club GreenSock member. You can certainly create that effect using GSAP, although I probably wouldn't recommend doing it with background-image because that's limited to whole pixel values for position, so it can look rather jerky at slow speeds. It'd be much better to just use a regular image element or I guess you could use a <div> with background-image, but animate that whole element (and you can make the container <div> overflow:hidden). That way, you get the benefit of using transforms which tap into sub-pixel rendering. It's usually better for performance too. This thread might be useful: If you still need some help, please post a codepen demo that we can peek at. As for GreenSock effect tutorials, we have a learning section at but there isn't an article specifically talking about the Ken Burns effect. There are tons of GSAP tutorials scattered across the web, though, so Google is your friend Happy tweening!
  13. If I understand your question correctly, no, sorry, there isn't a built-in way to do that. You could just find the closest value in your array and tween there.
  14. GreenSock

    TranslateZ stacking only working correctly in Safari

    Yeah, Safari handles things radically differently than all other browsers in terms of rendering 3D transforms. You can angle things on the 3D axis and it'll chop things in half that overlap. Other browsers just rely on z-index for stacking order, plain and simple. So I think you'll need to resort to that. This isn't an issue related to GSAP - it's just how [most] browsers work. I wish I had a magic bullet for ya. Perhaps someone else has a different solution to offer.
  15. GreenSock

    immediateRender demystified doc extend with set

    Hm, I read this a few times and looked at your demo and everything is working exactly as I'd expect. I feel like I must be misunderstanding your point. x starts at 0, then you put a set() call 3 seconds into the timeline to make it jump to 100 but since immediateRender is true, it also renders that immediately (at the time your set() call is evaluated). But that doesn't change the fact that the actual tween/set is positioned at the 3-second spot. So later, when you jump back to a time of 0, that's BEFORE the 3-second spot, thus the set() reverts to 0 as it should. Am I missing something?