Jump to content
GreenSock

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!

GreenSock

Administrators
  • Posts

    13,198
  • Joined

  • Last visited

  • Days Won

    409

Everything posted by GreenSock

  1. Glad you figured out a solution, @mtkramer, but I'm a bit baffled. Are you saying that even version 2.x of GSAP wasn't working for you?
  2. 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.
  3. 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.
  4. Yeah, sorry @UmerHayyat but I don't think you'll get very good cross-browser support for that kind of thing. It's much better to put SVG into HTML rather than the other way around (at least in my experience).
  5. You actually can do it by using the "cycle" special feature in the stagger methods. Kinda like: TweenMax.staggerTo(".box", 1, { x:1000, cycle:{ duration:function(i, target) { //<-- this is the key. return i * 1 + 0.5; } } }); Does that help?
  6. Absolutely. See my answer in your cross-post. Happy tweening!
  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.
  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: https://greensock.com/docs/Plugins/CSSPlugin https://css-tricks.com/writing-smarter-animation-code/ Does that help?
  11. 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: https://codepen.io/GreenSock/pen/2b691d6b72f1f6a177922f42da38aa39?editors=0010 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.
  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!
  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}, rows; while (max < (max = elements[cols++].getBoundingClientRect().left) && cols < l) { } cols--; 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, { scale:0.1, stagger: { amount:1.5, grid:"auto", from:findPositionIndex(".box", "center", "top") } }); Here's a codepen: https://codepen.io/GreenSock/pen/BegYXV?editors=0010 Does that help?
  15. 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: faceMasterTL .add('facemasterstart') .add(faceFadeTL, 'facemasterstart') .add(faceMorphTL) .add(blowBubbleTL) .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
  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).
  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: https://codepen.io/GreenSock/pen/59a09cd93d50807d3e8861e90d19074e?editors=0010 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?
  18. Great, so are you all set @Matthias Weber? Is there anything else you still need help with?
  19. Hi @dee. Welcome to the forums. Can you clarify what your GSAP-related question is? I didn't quite understand. What exactly are you stuck on?
  20. For the record, the latest version of PixiPlugin does have a registerPIXI() static method that you can utilize for this. It was added in GSAP 2.1.3.
  21. Cool. And for the record, I did post about a blendEase() helper function to blend two eases together (which I realize isn't the same thing as what SplitEase aims to do). https://greensock.com/docs/HelperFunctions
  22. Yeah, it looks like whoever made that plugin didn't account for multiple transform-related tweens (even if they're not overlapping). If you need some consulting help building something (plugin), feel free to reach out to me privately and we can try to figure something out.
  23. I think @OSUblake is right. Let's say your first tween is controlling translateX, but then you create another (overlapping one) for translateY. They're BOTH funneled through that 3rd-party "transform" plugin which only looks at the values passed into it. So while they're overlapping, the first tween will set the transform to the translateX value, and then right after that (on the same tick), the second tween will set the transform to translateY. So the translateX gets wiped out, replaced with just the translateY. See the issue? The plugin would need to take a more wholistic approach. In GSAP, we treat the _gsTransform object as a proxy of sorts, where each component (x, y, scaleX, scaleY, rotation, etc.) is stored/edited and then when a tween renders it pulls from that common object. I'd suggest that the 3rd party plugin could do something like that.
×