GreenSock last won the day on January 15

GreenSock had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by GreenSock

  1. 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!
  2. 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!
  3. 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?
  4. 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!
  5. 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.
  6. 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.
  7. 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?
  8. GreenSock

    Concatenate Eases with config

    Let us know if you still need any help. Since various eases accommodate different types of config() values, you can't just plop a common chunk of code in there for everything, but you could certainly build something that'd have conditional logic where necessary to accommodate parameters.
  9. Glad it helped! Yeah, if you're looking to take your animation code to the next level, definitely check out this article if you haven't already: Happy tweening!
  10. Yeah, I definitely wouldn't recommend writing your code so that it depends on exact values like that because you're bound to run into issues with the way computers do math. Plus, keep in mind that GSAP is totally time resolution-independent, meaning it updates anywhere, anytime and renders things at precisely that time. The browser's refresh rate is very unlikely to land EXACTLY on a specific whole value time in your timeline. I didn't quite understand why you needed the 0.3 value in the conditional logic (or a progress of 0.5). Aren't you just trying to figure out if the current time falls between certain ranges anyway? I took a stab at rewriting things in a much more streamlined way: Does that help? I'm not exactly sure if that's the behavior you wanted, so let me know if there's something else you were looking for. Thanks for being a Club GreenSock member!
  11. Yeah, that doesn't really help at all. We need to see the non-working version. Maybe try Or
  12. Aha! That may be the key. I wonder if either the external CSS files haven't fully loaded at that time yet or perhaps they don't contain the style you think they contain. Again, I really wish you could provide an actual reduced test case that we could see for ourselves. I'm not sure we can do much else without that. I'd bet that if you put the styles directly in the page it'd work, though I know that may not be ideal in your scenario.
  13. I'm sure we could help if we can see your actual project or a codepen demo (even better). It's just so hard to troubleshoot blind like this. I really want to help, but my hands are tied. That error almost sounds like CSSRulePlugin wasn't loaded (which is odd because you're referencing it directly in that "plugins" const).
  14. Sorry to hear about the trouble. Is there any way you could provide a reduced test case in codepen or something so that we can see what's going on? We'd love to help, but it's tough to troubleshoot blind. I doubt this is the main issue, but I was wondering if maybe tree shaking was getting rid of CSSPlugin in your bundler or something. If so, simply reference CSSPlugin somewhere in your code as we describe in the docs: I also wonder if it'd help at all to use two colons, like .header__outer::after. I doubt it, but it's worth a shot.
  15. GreenSock

    Morph SVG issue in edge and IE 11

    Ah, sorry about the confusion there, @adamQ. There was a new feature we're working on in 0.9.0 that needed one minor tweak. That should be fixed now in that codepen flavor of the MorphSVGPlugin. If you refresh, it should work well now. Does everything look okay to you in the Microsoft browsers?
  16. GreenSock

    Missing frames after addPause callback resumed

    I'm traveling at the moment, but I'll look into this when I'm back. Thanks for the detailed info and your patience.
  17. GreenSock

    Missing frames after addPause callback resumed

    Are you familiar with lagSmoothing? GSAP is built to honor timings primarily, but it'll also adjust for some amount of lag. It's a trade-off of course and you can control it to be whatever you prefer. As far as I can tell, things are working as they should. Remember that you cannot assume things will always run at 60fps. GSAP was built to be completely resolution-independent in terms of time, so you you jump anywhere. If you've got tons of things animating and there's a lag in the browser for .25 seconds, for example, on the next tick GSAP will jump .25 seconds ahead (as it should). It kinda sounds like you were expecting it to act as if .25 seconds didn't elapse, but only 1/60th of a second (assuming 60fps) - is that right? Again, you can tweak lagSmoothing() to give you that behavior but that also means that when the browser bogs down, your animations will get slower and slower. Hopefully docs and the video there make it clear.
  18. GreenSock

    svg dotted line turns to solid on animation

    Yep, @Shaun Gorneau is exactly right. Another thing you could try is just animating a mask of a dashed line. I wouldn't be surprised if @PointC swings by and offers another suggestion, as he's done a lot in this realm. Happy tweening!
  19. You're trying to empty one timeline into another? Yeah, you could just getChildren() and loop through and add() them to the other. But it isn't as if it's expensive to have nested timelines, so don't feel like you NEED to do that to somehow avoid a performance problem. There are even some cases where having things nested could lead to improved performance (though I highly doubt it'd be noticeable).
  20. GreenSock

    Animate from the bottom up

    No problem. Again, there are tons of ways to do it, but here's one: I created a function that you just feed parameters to and it fires off the animation accordingly. Does that help?
  21. GreenSock

    Animate from the bottom up

    There are a bunch of ways to do this, but here's one: Basically you set it up at the full height, and then simply animate the scaleY from 0 to 1 with the transform-origin being at the bottom. Does that help? Thanks for being a Club GreenSock member!
  22. GreenSock

    SVG Masks and Animation

    Nah, there shouldn't be a huge learning curve in terms of what GSAP can animate - you pretty much point it at whatever properties you want to animate and it handles them for you. In this case it was just a matter of adjusting the "y" and "height" attributes on the SVG elements (well, animating those). Let us know if you need anything else. Happy tweening!
  23. GreenSock

    SVG Masks and Animation

    Welcome to the forums, @kadams277. Is this what you're looking for?:
  24. GreenSock

    tween 3D property "z" not taking effect

    I don't have time at the moment to pull the whole project apart to see what's going on, but this sounds like maybe you just forgot to put a perspective on the container. Remember, browsers won't render the 3rd dimension of 3D effects without a perspective set (typically on the containing/parent element).
  25. GreenSock

    Which default animation does TweenLite uses?

    And just to be clear, it's impossible to replicate most of the eases using a single Cubic Bezier. They require at least two segments. If you need those parameters (like to be used for CustomEase), just let me know and I can find those for you. Those ones on the site are pretty loose approximations.