Leaderboard

CSS filters like blur are huge performance killers (as you've seen). What you are doing is probably one of the most strenuous things for the browser to render (moving very large things with filters and variable transparency). If you remove the blur and gradients and use just a solid color you'll see things run much smoother on under-powered devices. GSAP can set the properties you need super fast, but the browser's rendering is a huge bottleneck. It might be worth experimenting with SVG like Mikel suggested or giant pngs. I think you'll find that each has their downsides and you'll probably get different results in different browsers. Unfortunately, I suspect it will take a considerable amount of testing and compromise.

You already have a transform on that element so when you change the transform origin, it changes how those transforms are applied and you get a visual shift. Notice what happens in this demo without any GSAP when the transform origin changes: One suggestion would be to do your initial rotation with transform origin of "0 0" already set and use translateX, translateY to position it where it should be. Another option is to rotate the outer div as you are but apply the scale only to the image

Interesting question... I assume you are aware of much what I am about to write, I'm just 'writing it out loud' as it helps me think.. You know that you can add a nested timeline that will only play when the parent timeline 'cursor' gets there without having to set it's property to true. However you want to create a timeline, wait for an async response in the future then add it to the parent. May I ask you why? Why must you create the timeline before the async response? Creating timelines is generally so cheap you could just wait for the response before creating and adding the nested timeline. You also say the secondary timeline may be reused several times. Well, that begs another question. Are you saying you want the same timeline nested into different timelines? And somehow it knows if it's been played in any of the parents? Or do you want the same type of animation created after a certain event has occurred? For the second option, returning a timeline from a function will do the trick.

The progress() method is available for tweens too. https://greensock.com/docs/TweenMax/progress() If you have a bunch of loose tweens, I'd recommend a timeline for easier control, but that's just my two cents worth. Happy tweening.

It looks like this is the 3rd time you've posted a version of this question about your canvas project. In your most recent post (which you've now deleted), Jack gave you this answer: We're more than happy to help with GSAP related problems, but these general JS and canvas questions should be posted on a more general forum. Perhaps you could try Stack Overflow.

Also, there's a known Chrome bug (Mac only) that can cause 3D transforms to take unusually long to render (only noticeable under heavy pressure). Again, this has nothing to do with GSAP, but if you're on a Mac it may be making this perform even worse. The biggest issue is probably the very expensive filter and the amount of pixels you're asking the browser to push around on every tick. A PNG of the element already blurred is gonna perform WAY better than having the browser do the blurring for you with a filter. Canvas would likely also be smoother as well (maybe PixiJS?).

Hi @Marme, Welcome to the GreenSock Forum. If you are looking for a randomly controlled background animation, take a look at this one: You can customize a number of adjusting screws. Plus blurred SVG circles instead of the gulls ? Best tweening ... Mikel

Thanks for providing all the clear demos. Without knowing more of the requirements I would agree with Dipscom's solution of using a function to return a timeline on demand. What he is referring to as the 'cursor' we typically call the playhead (if that helps clear things up at all). The engine won't automatically unpause a child that you explicitly tell to be paused as that could really confuse people. "wait, I told this timeline to be paused, why is it now playing?" I guess I'm not understanding why the first example you provided (where you unpause it when you add it) is not suitable. After some thought and tinkering it seems you could place a callback at the same time as your paused timeline is inserted and use it to unpause that nested timeline. Not sure if that's really the best solution, as there will an imperceptible delay (of a few MS) between when the function is called and when it executes, but it might be an option for you document.getElementById("add").addEventListener("click", function() { mainTl.call(unPauseATimeline, [secondaryTL]); mainTl.add(secondaryTL) }); function unPauseATimeline(timeline){ timeline.play(); }

I will try it with a png as a first step and then maybe have a look at canvas, didn't use that before. Thanks for your advise guys, i appreciate it a lot ❤️

Figured it out! Simply resetting the transform: matrix(####) back to the original values does the trick! I was messing around with the clearProps: all, which gave some really odd results. Works just fine now!

That's awesome, thanks a lot! I hope this will be ok with the client. They can be quite a pain in the #ss... I'll try my best to convince them, as this works much better. And try to make them greedy bastards get a Greensock plan Thanks again!

Hi @Mantvydas Relative positioned elements should animate just fine. You said the animation is sometimes sluggish. Did you mean on the first play or randomly? If it's on the first time your timeline plays you may want to try this: tl.progress(1).progress(0); // this will record all the values upfront. I also don't know what those elements are and how big they may be. How hard are you pushing the browser? Are they the only thing animating or are they part of a timeline with hundreds of elements moving at once? If you can put together a demo, we can get a better idea of what may be causing any sluggishness. If there is an issue, it's unlikely to be a GSAP related problem. It's most often browser related as that's where all the rendering happens. Hopefully that helps a bit. Happy tweening.

@GreenSock thanks for the tips! I forgot that loading time affects the performance of animations, therefore I minimized the video from 60MB to 5MB, added some sexy grid to cover this low quality and everything works sweet For production I will also download the video on website preload so everything should work basically in an instant. Cheers! NOTE: Moving any animations to canvas and SVGs seems to have lower impact on the video playback.

Performance optimization is a pretty huge topic, so it's very difficult to know exactly what's causing the problems on your particular page. In general, the biggest problem tends to be the browser's graphics rendering, so make sure you're affecting the smallest number of pixels possible, that the bounding box for those changes is as small as possible, and that you're not animating things that could affect document flow (like top/left, margin, etc.) If you still need some help, feel free to post a link or a reduced test case so we can see what's going on. Happy tweening!

Yeah, this is definitely isn't a trivial task, but I took a crack at it for you: A few things to note: I simplified a lot of the code using some boilerplate functions for creating SVGs and setting attributes. I used a liveSnap to implement the bounds manually. It was simpler to just use a Draggable for the overall group, and use the center, line, and outer edge elements as the "trigger". That way, the bounds are applied to the overall group very easily. This whole thing would have been super simple if it wasn't for the custom logic necessary to limit the outer circle based on its radius in relation to the edges. That was the tricky piece - definitely an edge case. I sure hope that helps. Hopefully you'll see enough value to join Club GreenSock

Here is the part 2, I should have just maybe made it into week long series rather than trying to finish it in 2 parts. After about 45 minutes in both parts, I could only finish the basic effect. Not sure if I should make part 3. I might just switch to making smaller videos rather than something longer like this but will see how it goes. As for making videos, it gets overwhelming at times but I am enjoying it and think it will only benefit me.