Jump to content

GreenSock last won the day on July 24 2019

GreenSock had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by GreenSock

  1. Hm, that's tough to diagnose blind as far as the composite goes (there must be something you're changing/animating to trigger that), but as a performance optimization it may take up to 2 seconds to autoSleep. It doesn't check on every....single...tick to see if there aren't any animations left. It does that every 120 ticks by default (though you can change that if you want, via TweenLite.autoSleep). If you still need some help, please provide a reduced test case and we'll take a peek. But overall, I'd say there's probably nothing to worry about in terms of GSAP specifically - it will power down when possible.
  2. Sorry, I don't really understand your question. You can call timeline.time(YOUR_TIME_HERE) to control exactly what time you want it to render at immediately. Like, maybe call that and then do your render?
  3. Hm, that's pretty weird. It sounds like an issue with your build system/bundler, likely related to tree shaking. I would definitely recommend importing CSSPlugin and referencing it somewhere in your code in order to protect it from tree shaking, as mentioned in the docs. import {Elastic, TimelineLite, CSSPlugin} from 'gsap/all'; const gsapStuff = [CSSPlugin]; //<- just to protect from tree shaking. Add whatever you want here. Does that resolve things at all? Oh, and I'd strongly recommend using yPercent:-10 instead of y:"-10%" to prevent ambiguity. //not as good: y: '-10%' //better: yPercent:-10 Oh, and there's no reason for you to use a setTimeout() like that in order to delay the timeline's start by 1 second. All you need to do is add a delay:1 to your TimelineLite constructor vars: const tl = new TimelineLite({ delay:1 }); If you're still having trouble, please provide a reduced test case, maybe in codesandbox or something like that. It's just tough to troubleshoot blind.
  4. It's a remnant from the old ActionScript API. We've simplified things quite a bit since then, and the add() method is much easier. We silently supported insertMultiple() and some of the other legacy methods just for backward compatibility. But I wouldn't recommend using them. @mirohristov glad to hear you're enjoying the tools! Good luck with the project. Let us know if you need anything else. Oh, and I'd highly recommend this article because it can revolutionize your animation workflow: https://css-tricks.com/writing-smarter-animation-code/ (Code/Demos from @PointC are featured there). And I "whipped together" a plugin that might make working with Three.js easier - it's in this thread: Happy tweening!
  5. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. With some animation engines it can be frustrating trying to get something to rotate in a specific direction. With GSAP you can explicitly set the direction or let GSAP figure out the shortest distance. Watch the video Interactive demo See the Pen DirectionalRotation Visualizer by GreenSock (@GreenSock) on CodePen. Check out the DirectionalRotation Plugin docs for more info.
  6. I haven't used it, but isn't that what https://github.com/googlearchive/flipjs does? There are instructions there for using it with GSAP. Per your request, though, I whipped together a flip() helper function that might be more of what you're looking for. Here's a simple codepen that takes 7 <div> elements and re-parents them into a different container (right half of screen), then animates them there using FLIP. https://codepen.io/GreenSock/pen/BEELej?editors=0010 Here's the function: /* This is the function that does all the magic. Copy this to your project. Pass in the elements (selector text or NodeList or array), then a function/callback that actually makes your DOM changes, and optionally a vars object that contains any of the following properties to customize the transition: - duration [Number] - duration (in seconds) of each animation - stagger [Number | Object | Function] - amount to stagger the starting time of each animation. You may use advanceds staggers too (see https://codepen.io/GreenSock/pen/jdawKx) - ease [Ease] - controls the easing of the animation. Like Power2.easeInOut, or Elastic.easeOut, etc. - onComplete [Function] - a callback function that should be called when all the animation has completed. - delay [Number] - time (in seconds) that should elapse before any of the animations begin. This function will return a TimelineLite containing all the animations. */ function flip(elements, changeFunc, vars) { if (typeof(elements) === "string") { elements = document.querySelectorAll(elements); } vars = vars || {}; var bounds = [], tl = new TimelineLite({onComplete:vars.onComplete, delay:vars.delay || 0}), duration = vars.duration || 1, copy = {cycle:vars.cycle || {}}, i, b, p; for (i = 0; i < elements.length; i++) { bounds[i] = elements[i].getBoundingClientRect(); } changeFunc(); for (p in vars) { if (p !== "duration" && p !== "onComplete" && p !== "delay") { copy[p] = vars[p]; } } copy.cycle.x = function(i, element) { return "-=" + (element.getBoundingClientRect().left - bounds[i].left); }; copy.cycle.y = function(i, element) { return "-=" + (element.getBoundingClientRect().top - bounds[i].top); } tl.staggerFrom(elements, vars.duration || 1, copy); return tl; } Is that what you were looking for?
  7. Hm, I guess I don't understand how you'd expect to be able to use Draggable or SplitText without any DOM. Like...what would it drag/split? Those tools are pretty reliant on a DOM. Perhaps I misunderstood your question.
  8. You have a syntax error. A to() tween requires 3 parameters: target, duration, vars. You're only passing 2. I think you meant to use a set(): //BAD: TweenLite.to(element[i], {clearProps:"all"}); //GOOD: TweenLite.set(element[i], {clearProps:"all"}); //ALSO FINE, BUT LONGER: TweenLite.to(element[i], 0, {clearProps:"all"}); Does that resolve things for you?
  9. Oh, sure. GSAP at its core is just a super-flexible high-speed property manipulator. It doesn't need a DOM. You can animate any property of any object. For example: var obj = {myNum:0, myString:"0px 20px"}; TweenLite.to(obj, 2, { myNum:100, myString:"100px 80px", onUpdate: function() { console.log(obj.myNum, myString); } }); So it'll animate numbers or it'll even dig into complex strings to find numbers inside those and match them up in order. You could use an onUpdate to apply them in whatever custom ways you want too. Does that answer your question? That's great! Welcome aboard. We sure appreciate your support.
  10. I read your question a few times and I'm still a bit lost. clearProps literally removes any inline styles. Is that what you want? And you asked how to "reinit my tweens" - do you mean creating new tweens that are paused initially? If so, yes, the way you did it seems like it'd work. Or are you trying to take existing tweens and tell them to re-record their starting/ending values? If so, invalidate() is what you want. Are you running into a particular problem? Have you tried the code you suggested and it doesn't work?
  11. Oh, there's nothing special about wrapping it in an array - I just did that in case you have other plugins you need to reference as well. So you could simply add them to the array. Yeah, if you're still having trouble, please shoot us a codesandbox or something and we can take a peek.
  12. Glad you got it working, but the blended ease isn't as complicated as it may look in that demo: //just feed in the starting ease and the ending ease (and optionally an ease to do the blending), and it'll return a new Ease that's...blended! function blendEases(startEase, endEase, blender) { blender = blender || Power4.easeInOut; return new Ease(function(v) { var b = blender.getRatio(v); return startEase.getRatio(v) * (1 - b) + endEase.getRatio(v) * b; }); } TweenMax.to("#target", 2, {x:100, ease:blendEases(Back.easeIn.config(1.2), Bounce.easeOut)}); I created that "blendEases()" function for you that should make it super simple. Does that help?
  13. Oh, you're asking how to prevent Webpack from dumping MorphSVGPlugin with tree shaking? Just reference it somewhere in your own code, like: const plugins = [MorphSVGPlugin]; //<- just to prevent tree shaking dump
  14. Oh, interesting. It kinda sounds like you just needed an ES Module file - did you try using the ones that come in the download? In other words, it appears as if you're using the minified ES5 file, dropping it into a module wrapper, and using that instead of just using the regular ES module files from GreenSock. I mean, it's totally fine if your solution is working for you - I'm just saying you might not need any workaround at all if you use the correct ES module files.
  15. @iLuvGreenSock I didn't understand your question. Can you please clarify?
  16. I don't quite follow this - can you provide some sample code? A codepen would be SUPER helpful too. It almost sounds like you're trying to pass the actual plugin reference itself into a tween (which would be incorrect). For example: //BAD! TweenMax.to(target, 1, {morphSVG:MorphSVGPlugin}); //GOOD TweenMax.to(target, 1, {morphSVG:"#endShapeSelector"}); I'm sure we'll figure it out once we see your reduced test case. Happy tweening!
  17. I think this article might be very helpful for you: https://css-tricks.com/writing-smarter-animation-code/ You could just build a timeline with all the snow, and add it to the other timeline. Here's a basic demo: https://codepen.io/GreenSock/pen/8f4502cd03254e512cf3669f7f9a492b?editors=0010 But if you need the snow to be in a different state initially, that'll need to be tweaked. There are several ways to accomplish it, but I'm not sure exactly what you're looking for. Happy tweening!
  18. GSAP doesn't really let you set the time of the ticker itself, but you could definitely just put all your animations into a master timeline and then control that playhead to do your rendering. I'd highly recommend reading this article about how to build your animations in a modular fashion: https://css-tricks.com/writing-smarter-animation-code/ Enjoy!
  19. Welcome to the forums, @Anaximandro. GSAP is already based on requestAnimationFrame, so there's nothing extra you need to do. Are you just asking how to call your own function after GSAP does all of its updates? If so, see https://greensock.com/docs/TweenLite/static.ticker Otherwise, please describe what your goal is so that we can better help you. If your goal is to control the playhead position on your animations, there are a bunch of easy ways to do this. The most common is probably setting the progress() method of a timeline or tween. Or you can set the time() or totalTime(). Happy tweening!
  20. Hi @wisead. Welcome to the forums. Can you provide more details? What errors are you getting? Which file are you using (ES module, UMD, minified)? Do you have a reduced test case you can provide that reproduces the error? We know it works with Nuxt.js, as it seems plenty of others have done so successfully, but I'm not sure what configuration is necessary on the Nuxt side of the equation. It'd definitely help get you a better quality answer if you provided a reduced test case (or at least a few more details). We'd like to help. Cheers!
  21. Nah, opacity usually isn't bad at all. Fonts might be slightly less CPU-intensive, but probably not much - they're still basically vectors. One of the biggest drains is just the sheer number of pixels that must be updated. So if you have exactly the same complexity in shapes, but they're shrunk down quite a bit, that's easier for the browser. And yeah, if an SVG is just sitting there doing nothing, it's not nearly as difficult for the browser - it basically has to ask the question "which pixels have changed" 60 times per second, and then repaint those. So if they don't change tick-to-tick, it's pretty easy-peasy. Good luck!
  22. Yeah, sorry, it's really tough to troubleshoot a live site like that and try to wrap our heads around everything that's going on and then provide solutions for optimizing everything, but it certainly looks like a BIG issue is just that you've got a lot of SVG elements animating simultaneously that require repainting/compositing of large quantities of pixels. It's just a ton of work for the browser to do, unrelated to GSAP. I wish I had a silver bullet for you. If you have any GSAP-specific questions for us, we'd be happy to help.
  23. Sure, like I said, you can change force3D on a per-element basis. The CSSPlugin.defaultForce3D just sets the default, but you can override that whenever you want in any tween.
  24. Yeah, it seems smooth to me, but you are pushing the browser really hard in terms of rendering. SVG requires the browser to fabricate all the pixels dynamically because they're resolution-independent, and you've got a very large area of change. It has nothing to do with GSAP - I'd bet that the work GSAP does is less than 1% of the overall load - the rest is the browser having to rasterize & paint all those pixels on every tick. A few tips: Avoid strokes and fancy linecaps. They're expensive rendering-wise. Limit the area of change. The more pixels that need to be updated, the tougher it is on the browser. Switch to <canvas> if you need better rendering performance. Maybe even experiment with using regular DOM elements like <div> and <img> to create your objects because those can be GPU-accelerated whereas SVG typically can't. Happy tweening!