GreenSock last won the day on November 18

GreenSock had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


GreenSock last won the day on November 18

GreenSock had the most liked content!

Community Reputation

4,825 Superhero


About GreenSock

  • Rank

Contact Methods

Profile Information

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

Recent Profile Visitors

43,593 profile views
  1. Tween Move and Scaling Issue

    You could just separate that part into a different tween that has a longer delay, like:"#box", .5, {delay:2, x:615, y:615});"#box", 0.2, {delay:2.3, scale:1}); Of course you could easily set it up in a timeline if you prefer: var tl = new TimelineLite({delay:2});"#box", .5, {x:615, y:615}) .to("#box", .2, {scale:1}, "-=0.2"); I personally find it easier to set things up in their end states and then use from() tweens to animate them into place instead of doing the math to figure out the opposite. So if I were you, I'd do it like this: Happy tweening!
  2. Hm, sorry to hear about the trouble. It's super difficult for us to troubleshoot on a live site with thousands of lines of minified code. It looks like maybe that's the part of the code that's specific to old version of IE for handling "opacity" (IE8 didn't support "opacity", so a Microsoft-specific filter had to be used). I really wish I could do more to help without a reduced test case, but I'm at a loss. There's no way to reproduce this in Codepen or a simpler test that doesn't use minified code?
  3. Easing Function Not Displaying

    It's not displaying because you've got opacity set to 0 in your CSS (so it's invisible). And you're trying to target an object named "light" in the tween instead of using selector text like "#light". Here's a fixed fork: Does that help?
  4. Easing Function Not Displaying

    I didn't see any problem. Did you mean Linear.easeNone? Also, it looks like you've got a commented-out tween that animates the "top" using the default ease (Power1.easeOut), so maybe that's what's confusing you. "y" and "top" both affect the element's vertical position and you've got two different eases at play. See what I mean?
  5. Firefox's new browser Quantum (v57) was released today!

    Yeah, the new Firefox is a bit of an odd beast performance-wise. It looks like certain things are optimized and others are totally NOT. Like when animating top/left/width/height, it's horribly slow compared to Chrome. But transforms are much better. Another oddity is that for some things, WAAPI significantly outperforms CSS transitions even though they're supposed to use the same mechanisms under the hood. I already talked to the Firefox folks a couple of weeks ago about the really bad top/left/width/height animation and they said they think it's a Firefox bug. And it's affects all other JS libraries too, of course - it's not a GSAP thing. Hopefully they'll fix things soon.
  6. Can we create a basic retro game using GSAP?

    That's great feedback, @Maelfyn. Thanks so much!
  7. how to killall tween of one game?

    A few ideas: 1) Just put each game in its own iframe. Done. Very easy and clean. 2) Use the "data" property of the tweens to tag them with an identifier for which game they belong to. Then use the getAllTweens() and loop through the array and kill just the ones that match what you're looking for. Kinda like:{x:100, data:"game1"});{y:50, data:"game2"}); killTweensOfGame("game1"); function killTweensOfGame(name) { var tweens = TweenMax.getAllTweens(), i = tweens.length; while (--i > -1) { if (tweens[i].data === name) { tweens[i].kill(); } } } Obviously that means adding "data" to every one of your animations which may be a tad cumbersome. 3) Create a TimelineLite for each game, and populate it accordingly. var game1 = new TimelineLite({autoRemoveChildren:true, smoothChildTiming:true}); var game2 = new TimelineLite({autoRemoveChildren:true, smoothChildTiming:true});;; //then to kill all the game1 tweens... game1.kill(); //or game1.clear(); Does that help?
  8. splittext revert is erasing spans that were there before

    @ericshew replied via email and said:
  9. Is there a default x, y of element?

    I've told @OSUblake that he's got an open invitation to write guest posts on the GreenSock blog.
  10. TweenMax.defaultEase vs TweenLite.defaultEase

    Nah, you'd probably never notice a real-world difference but technically TweenLite's render method is slightly faster just because it doesn't have the conditional logic for repeats/yoyos. I'm in the habit of using TweenLite always unless I need a TweenMax feature, but that's only because I'm a performance nut. Again, I highly doubt you'd ever even notice a difference if you're tweening 1000 things simultaneously. You don't need to feel hesitant about using TweenMax.
  11. TweenMax.defaultEase vs TweenLite.defaultEase

    Exactly. There's no such thing as TweenMax.defaultEase. TweenLite is the core class for everything, thus it's the proper place to attach static properties like that. It'd be inefficient to have to check two places for a default ease (and then what if they were different?). Sorry, I was talking about the docs being fixed
  12. Welcome to the forums. We'd love to help - it's just really difficult without some kind of reasonable reduced test case that clearly reproduces the issue. This doesn't sound like a GSAP-related issue, but I could be wrong. It looks like you've got some PHP intermingled in that HTML. A codepen would be ideal, but even some live site would be better than a copied/pasted version of all the HTML, CSS, and JS for us to try to parse through and guess. Any chance you could provide that?
  13. Create an array for a stagger in Flanimate

    Sure, maybe something like: var a = [], total = 20; for (i = 1; i <= total; i++) { a.push(root.Lights["GlowBall" + i]); } til.staggerTo(a, 0.75, ...); Does that work?
  14. Slow render - how to make it better

    Unfortunately, I think that's just too ambitious for the browser to handle. You've got 324 paths that you're morphing simultaneously, each with at least 4 points and you're stretching the SVG across the entire browser screen and you're using strokes which are notoriously CPU-intensive for the browser to render. And since it's SVG, it literally has to re-rasterize every path on every tick (it'll try 60 times per second). It must re-calculate and repaint every single pixel on the fly on each tick. This isn't really a GSAP issue - it's a graphics rendering thing with the browser. You can see what I mean by setting display:none on your SVG and see how much that improves the frame rate. There are ways you could optimize the initial calculation of the morphing (see but I really don't think that's the main problem here. That'll only help get that initial pre-animation calculation to be faster. I wish I had a magic bullet for ya. You could try moving to a <canvas> solution (@OSUblake has some cool demos that use MorphSVGPlugin canvas even though it was intended for SVG). I bet that'd be faster, but it still ain't gonna be easy for the browser to manage painting all that shifting vector data. Perhaps Blake has some other ideas. Actually, if your goal is to have a similar shape copied over and over morphing to the same shape, I bet you could just do it once in a <canvas> and then copy that on each tick to repaint it in new coordinates. That'd be relatively cheap. Again, @OSUblake is a master at this kind of thing, so perhaps he'll have time to chime in.
  15. Remove pauses between timeline tweens

    Welcome to the forums, @Caj. That brief pausing is simply the result of the ease you're using. Actually, you defined "Power2.linear" which doesn't exist, so it's using the default ease of Power1.easeOut. That makes each tween start out quickly and then slow down toward the end. There isn't actually a pause inbetween at all (that's an illusion). All you need to do is set your ease to Linear.easeNone or Power0.easeOut (or any of the Power0 eases). Here's a fork: Is that what you were looking for? And don't worry, you'll get comfortable quickly with GSAP. Once it "clicks" in your brain, you'll love it. (not that I'm biased or anything) For more information about all the eases, check out the ease visualizer at Happy tweening!