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. Welcome to the forums, @mogwai. We'd love to help, but just seeing a snippet of code doesn't really help - we need to see the issue in context. Would you please provide a reduced test case in codepen or stackblitz or something like that? It kinda sounds like maybe you have something else controlling that animation rather than just GSAP (like something is fighting with GSAP)? Totally a guess. You seem to have defined the ease correctly, though I don't see any imports nor do I see if you're correctly loading CSSPlugin (which would be necessary to animate CSS-related properties). 

    • Like 1
  2. You don't actually want it to be contingent on exactly 1px away, do you? Like...what if it's 0.5px away, what progress (decimal) would you expect? 


    My guess is that you'd want something like this:

    function getProgress(x) {
      return (x % 200) / 200;


    Just feed in an x value and it'll give you a 0-1 progress amount. 


    Does that help? 

    • Like 1
  3. I'm not sure I understand your question - when you say "switch to another tab" do you mean the circles, part1, part2, and part3? Or do you literally mean another tab of the browser? 


    I definitely see a problem in your code: 



    When you put "()" after the function reference, it tells the browser to call that function immediately, so you're putting the RESULT of that function (whatever is returned) as the event listener which I'm sure isn't what you meant to do. Your tweenAni() function doesn't even return anything. It just creates and executes a timeline immediately. 


    If your goal was to call tweenAni() whenever someone clicks on one of the elements in the tweenLi[] list, remove the "()" so you're just passing the function reference in. But again, I'm not really sure what you're trying to accomplish so that may not solve all the problems. 

    • Like 2
  4. I'm not sure this is a GSAP-related issue, and it's just too cumbersome to try to troubleshoot a live site with so many other things going on, 3rd party scripts, etc. If you still need some help, please produce a reduced test case in codepen and we'd be happy to take a peek. 

    • Like 1
  5. 10 hours ago, JackIsJack44 said:

    But I don't understand why there is this extra-object 'Cycle' because

    1/ we can customized 'x', 'y' by object in "vars parameters", without using cycle.

    2/ this can lead to conflit between parameters (in your exemple, "1 sec" versus "i * 1 + 0.5")

    3/ and why the name is 'Cycle' ? There are no repeating processes with it.


    • Yes, GSAP searches the "vars" object for function-based values. However, the duration isn't in the vars object - it's a standalone parameter. 
    • "cycle" was originally intended to cycle through a set of values (as the page @mikel referred to explains) but then we added features to it to accommodate function-based values too. That pre-dated function-based values in the regular "vars" object. 
    • I'm working on GSAP 3.0 and I'll definitely make duration accommodate function-based values. Don't worry. I'm pretty excited about 3.0. It'll be several months before it's ready, though. For now, I'd recommend just using cycle.
    • Like 3
  6. You actually can do it by using the "cycle" special feature in the stagger methods. Kinda like: 


    TweenMax.staggerTo(".box", 1, {
            duration:function(i, target) { //<-- this is the key. 
                return i * 1 + 0.5;


    Does that help? 

    • Like 3
  7. Your FLA seems to be set up to publish to HTML/JS which means you CANNOT use ActionScript. That definitely explains why the blurFilter wouldn't work. 


    Here's an article that might help: https://greensock.com/GSAP-Animate-CC-2017


    And you'll probably want to use EaselPlugin: https://greensock.com/docs/Plugins/EaselPlugin


    And yes, absolutely, you can use GSAP to animate properties that Adobe makes available in their canvas library, CreateJS. Just remember it's a subset of what you were used to in the Flash/SWF days. 

  8. Hi @1by1. Welcome to the forums. It looks like you're trying to use the old ActionScript version - is that correct? And are you publishing to a SWF? You posted in the HTML5/JS forums, so it's a bit confusing. I wonder if maybe you're trying to use the ActionScript stuff in a FLA that's publishing to HTML5/JS? If so, that's not possible. ActionScript only works when publishing to SWF/Air. And we haven't actively supported the ActionScript version for many years. Most of the world has moved on to HTML5/JS now. 


    Let us know if there are any questions we can answer regarding the HTML5/JS version. 

  9. Yep, absolutely. You could always seek(0) the timeline that has the staggered animation, kill() it, and re-create it so that the stagger logic runs again and factors in all the new positions. 




    Does the proposed API makes sense? The array like [0.5, 1]? Does anyone have other suggestions? I thought about a string, but it's just didn't feel as clean that way, and it'd require a bit more code. I like keeping things as concise as possible. 

    • Like 2
  10. If I understand your goal correctly, you can simply add a transformOrigin to your tween: 


    tl.from(leftBell, duration, { rotation: 15, transformOrigin:"50% 5%" })


    That basically means that the pivot point would be halfway along the element's bounding box's x-axis (centered), and 5% down on the y-axis. 


    These resources may be useful: 




    Does that help? 

    • Like 1
    • Thanks 1
  11. 32 minutes ago, Shrug ¯\_(ツ)_/¯ said:

    it appears it would work nicely even when needing to recalculate dynamically.


    Can you explain what you mean by "recalculate dynamically"? I just want to make sure I'm not missing something. I mean, it's not like if you did a staggered animation and THEN you resized the window and everything re-flowed, that it'd magically go back and alter all the staggers for you. That's way beyond the scope of this. But the whole grid:"auto" thing nicely accommodates figuring stuff out on-the-fly, like if you've got media queries in place that set things up differently (before the animation is created). Is that what you meant? 

  12. Ah, you mean you'd need to make sure there are an odd number of rows/columns in order for things to be truly centered on an axis? Well that spurred an idea...


    What if you could use normalized ratios in an array, like [0.5, 0] where the first number corresponds to the x-axis and the second to the y-axis? So [0.5, 0] would be center top, [1, 0.5] would be right center, etc.? This way, you'd get total freedom and you could literally use ANY decimal value between 0 and 1 for each. If we get enough interest, I'd consider adding this functionality to the next release. Here's a demo with the helper function: 


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


    I made that so you could even use a normal decimal and it'd apply to both axis, so from:0.25 would be a quarter of the way across the x-axis and the y-axis. 


    To be clear, all you've gotta do is wrap your normal advanced stagger object in this helper function and it'll work. No need to wait for the next release or anything (though if we add it to the next release, obviously you wouldn't NEED this helper function since it'd be baked-in). 


    If anyone has suggestions for improving it, I'm all ears. 

    • Like 1
    • Thanks 1
  13. I didn't notice any performance problems, and there are over 5000 lines of code in that demo so it's a bit overwhelming to try to do a performance audit with so much complexity, but I'll make a few comments:

    • You seem to have CSS transitions applied to almost everything. I definitely recommend against using CSS transitions/animations on the same elements that GSAP is animating. That can certainly cause conflicts and performance challenges.
    • Be careful about animating pseudo elements like ::before and ::after because my understanding is that some browsers don't handle that well (performance-wise). This has nothing to do with GSAP. 
    • SVG can be very CPU-intensive to render (again, this has nothing to do with GSAP), especially on retina displays (high-resolution). You might see better performance with canvas. 
    • GSAP and the browser won't animate an inline SVG element that is only partially-loaded, so I don't think that has anything to do with the problem you're experiencing. 
    • You mentioned 100fps. That's EXTREMELY high (good performance). Typical high performance is 60fps (in fact, most browsers can't do any more than 60fps). 

    If you still need some help, please provide a more reduced test case. We just don't have the resources to offer free performance audits on complex demos like this. 


    Happy tweening!

    • Like 2
  14. Here's a helper function I whipped up that'll spit back the appropriate index number: 


    function findPositionIndex(elements, x, y) {
      if (typeof(elements) === "string") {
        elements = document.querySelectorAll(elements);
      var max = -Infinity,
          cols = 0,
          l = elements.length,
          factors = {center:0.5, bottom:1, right:1},
      while (max < (max = elements[cols++].getBoundingClientRect().left) && cols < l) { }
      rows = (l / cols) | 0;
      return Math.floor((factors[y] || 0) * rows) * cols + (Math.floor((factors[x] || 0) * cols + 0.5) || 1) - 1;


    So you'd use it like this: 

    tl.staggerTo(".box", 1, {
      stagger: {
        from:findPositionIndex(".box", "center", "top")


    Here's a codepen: 

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


    Does that help? 

    • Like 2
    • Thanks 1
  15. 4 hours ago, AnSVG said:

    Can frequent pausing of one timeline mess up other unrelated to it timelines?

    If it's true, is there a way to 'isolate' a timeline which I constantly pause (because of mousemove), so it doesn't affect other timelines?


    You can pause a timeline as much as you want and it has absolutely nothing to do with somehow contaminating another timeline. There's no problem whatsoever with that, at least from GSAP's viewpoint. 


    From what I can tell, your issue is caused by something that Vue is doing in the DOM, swapping around elements and mixing up references. If you remove Vue from the equation, you'll see that the issue disappears. One way I noticed you can resolve the issue in this case is to pre-render your timeline(s) by simply jumping to the end and then back to the beginning when you first create them, like:

    	.add(faceFadeTL, 'facemasterstart')
    	.progress(1).progress(0); // <-- THIS PRERENDERS YOUR ANIMATIONS!


    That's basically forcing everything to get locked in initially (starting and ending values) so that Vue's shifting of things in the virtual DOM doesn't contaminate things. I'm not a Vue expert, so perhaps someone else can explain it better or offer a different solution. 


    It might also be worth trying a switch to using Vue's "refs" to reference the elements rather than selector text. Here's an article that Google came up with: https://codingexplained.com/coding/front-end/vue-js/accessing-dom-refs



    • Like 2
    • Thanks 1
  16. I'm not sure I understand the question. Are you saying you've got 9 different elements, all arranged in a grid, and you want to animate each one but have the start times of each animation be based on their position in the grid? Or are you saying that there's ONE element, and you're trying to basically stretch/morph it by independently grabbing/animating key points on it (like top left, bottom right, etc.)? 


    I think it'd help if you gave a little more detail about your end goal. Got a demo? 


    It's very easy to do advanced staggers based on positions in a grid, yes. It is impossible to stretch/morph an individual element by animating key points on it (unless maybe you do some advanced work with canvas and a library like PIXI.js). 

    • Like 1
  17. That's because morphSVG assumes the target is an SVG <path>, but in your case you've got a generic object with a property named "morphSVG" that you're trying to have it animate. You've gotta tell MorphSVGPlugin that. Luckily in the latest version I did bake in an [undocumented] easy way to do that - just specify a "prop" like: 


    .to(gulls, 1, { morphSVG: {shape:heart, prop:"morphSVG"} }, 0)


    That should fix your demo, but if you want even better compatibility you could use the new "render" feature that points to a function that you can use like this: 

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


    Some browsers don't recognize the Path2D() thing, but the render method I show above should work in every major browser and is likely a tad bit faster anyway. 


    Does that help? 


    • Like 3