Jump to content
Search Community

Is it possible to create infinite loop animation that wont max out CPU/render performance?

madleo test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi Team,

 

From experimentation, I'm assuming that there is no way to create an infinite loop animation with let's say 100 elements that won't air fry the fan/CPU.

Whether this be in CSS or JS.

Tried the will-change, and he translateZ(0)s with marginal benefit.

I think I have a base understanding as to why this cannot be achieved with CSS or JS alone.

I've added a simple codepen URL that demonstrates an example of what I'm referring to.

This 'performance' issue is quite critical to the implementation of an important feature.

 

With this in mind, should I want to achieve this effect, the only workarounds I can think of are:
- PIXI, ThreeJS, Canvas, and the like

- Create a video. After effects / Lottie files?

- pseudo elements (are pseudo elements less expensive to animate?

 

I'm sort of kidding with the latter.

But should the first option be viable, as in the CPU/performance will fair much better, then there is 1 more requirement, which is:

These animating elements needs to sit in front of an image.

An image that can be dynamically changed by the user.

So, something like 

See the Pen WVrpWe by hf666 (@hf666) on CodePen

Given that the particles are just elements, it's simply a matter of using basic css.

But will this work with something like PIXI/Three?

Needless to say, I've never used something like PIXI/Three before.

Although I will say that I will most likely move forward with ThreeJS given react-three-fiber.

 

Thanks a lot in advance.

Should time allow, I'd also really appreciate some insight as to how PIXI/Three works on a more fundamental and practical level when compared with pure css/js implementations. As well as how long it would take for an intermediate JS dev (advanced react...not that this means much) to pick up these tools to confidently implement the above.

 

Thanks again!

See the Pen qZqgGJ by Johnm__ (@Johnm__) on CodePen

Link to comment
Share on other sites

  • Solution

Yeah, the performance bottleneck is almost ALWAYS graphics rendering which has absolutely nothing to do with GSAP. And it looks like you're using filters (like blur) which KILL performance because the browser has a very hard time rendering those. So my guess is that less than 1% of the CPU load is GSAP and the rest is graphics rendering. That's why it won't matter if you switch to CSS to do the animation either - the browser still has to render the same stuff no matter which technology is interpolating the values. 

 

For the record, I've had literally thousands of elements animating at the same time and it was pretty smooth - it's all about keeping things cheap for the browser's graphics rendering engine. Like...use transforms and definitely avoid filters, especially blur. Sometimes you can simulate the same effect by just doing the blur in Photoshop or something, and use a regular PNG. WAAAY cheaper for the browser. 

 

You'll almost surely get significantly better performance by switching to a canvas-based approach, especially one that leverages WebGL like PixiJS and ThreeJS. And of course you can still use GSAP to animate those objects since it works with pretty much anything JavaScript can touch. 

 

You should be able to have a canvas element with transparency that you overlay on top of a normal image. It's more expensive, of course, but probably not too bad. 

 

Good luck!

  • Like 4
Link to comment
Share on other sites

Jack -- really appreciate the insightful answer!

Hmm..I do need a scalable solution; and by that I mean, the ability to create more robust/heavy UIs and animations.

I was hoping that for now I could push out some basic animations with CSS and/or JS, but as you said, it comes quite costly.

 

I never considered the PNG idea, although to achieve the certain fade out/ fade in effect, I can't imagine trying to swap out pngs at 60fps.

I am trying to achieve an affect akin to the levitating particle effect as shown in one of the codepens.

Currently what I'm working with is box-shadow + pseudo elements, but see that it's expensive to work with. Hmm.

Welp, nevertheless, thanks again -- I sincerely appreciate the help.

Oh and GSAP is definitely my favorite animation tool thus far -- even though all my work is done within the context of React Frameworks.

Congrats with all the progress, and oh and also, I feel that I should note that the two codepens i shared are not mine. heh.

Link to comment
Share on other sites

17 minutes ago, madleo said:

I never considered the PNG idea, although to achieve the certain fade out/ fade in effect, I can't imagine trying to swap out pngs at 60fps.

 

No no, you'd only have a PNG that's blurred...and then you can animate the opacity of that image. You don't need to swap in a bunch of PNGs at 60 fps. If you want to make it look like it's progressively getting more or less blurry, you can just crossfade a blurred image and a non-blurred image. 

 

Pseudo elements and box-shadow are both expensive rendering-wise. 

 

I'm sure a canvas-based solution would perform much better, but it's certainly not as easy to build. More of a headache in most cases from what I've seen, but if you're looking for top-notch performance that's the way to go. 

 

20 minutes ago, madleo said:

Oh and GSAP is definitely my favorite animation tool thus far

Yay! Thanks for the kind words. Very happy to hear that you've enjoyed GSAP thus far. Cheers!

  • Like 2
Link to comment
Share on other sites

Ah, haha gotcha. Thanks for clarifying.

And of course! Much more credit is due, and it's great to see the product evolving.

 

On a side note, I'd really appreciate your opinion with the following...

I have a project that I hope to make live in about 2-3 months time.

The most I can devote towards learning something like threejs + react-three-fiber is about 5 hours a day for 2 months, equating to a conservative 200-300 hrs.

I have zero background in graphics, but decent in JS land.

I need to be proficient enough to build backgrounds that you see in the various sections in http://vaalentin.github.io/2015/. (minus the scroll animations). It's difficult to say how easy/difficult this would be.

 

Lastly, if you were me, what would your learning path look like?

And apologies in advance for the horrendously bloated question!

 

 

Link to comment
Share on other sites

Yep, I totally agree with Zach. I'd pick a basic task I want to accomplish, and then attack that. PixiJS and Three.JS both leverage WebGL, so either one should work. I'm not very experienced with either one, so I can't offer much more advice there. My general impression is that Pixi might be more general-purpose and Three.JS is more targeted directly at 3D. 

  • Like 1
Link to comment
Share on other sites

No worries ~ and appreciate the input.
If this was purely for learning, I'd agree with you on the approach.

The decision to pick up one of these webGL tools is based on a strict timeframe for a project, and so I have to be a bit more cautious.

If it wasn't for the performance issues, I would definitely lean towards sticking with pure css, js, and gsap.

From what little I've researched however, ThreeJS + react three fiber doesn't seem too bad given the available resources -- it's more of the issue of volume.

That aside, the point about Pixi being more general purpose is something I haven't considered...and quite frankly, 2d animations should most likely suffice.

I'm going to try and recreate the shared animations with canvas first as you suggested, then perhaps progress into webgl land.

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...