Performance Issues only using translate3d

[Marme]

Basically I want to animate 2 blurred, colored elements with a fixed parent element spanning 100% of the screen as a canvas. The elements should be ever present on the page behind the content when the user scrolls.

I created a demo with only the background canvas here:
 

See the Pen EpYobj by Marmeladekuchen (@Marmeladekuchen) on CodePen

My 2015 MacBook Pro gets pretty loud after a while and when testing on older devices the browser had a hard time or eventually even crashed.

Can i improve this somehow? Any suggestions?

See the Pen EpYobj by Marmeladekuchen (@Marmeladekuchen) on CodePen

[mikel]

Hi @Marme,

 

Welcome to the GreenSock Forum.

 

If you are looking for a randomly controlled background animation, take a look at this one:

 

See the Pen gjYeQw by mikeK (@mikeK) on CodePen

 

You can customize a number of adjusting screws.

Plus blurred SVG circles instead of the gulls ?

 

Best tweening ...

Mikel

 

 

[Marme]

hey @mikel

I need to control the movement as the backgrounds shouldnt be in the center in front of the content most of the time.

How are SVGs an advantage over html elements with gradient background when it comes to performance?

It seems to me that filter: blur is causing the GPU to have much more work to do and after all SVGs will need a stronger blur effect.

[Carl]

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. 

[GreenSock]

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?). 

[Marme]

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 ❤️

[PointC]

Hi @Marme 

 

Welcome to the forum.

 

Here's a quick demo using Pixi.js and a gradient mask rather than a blur filter. Maybe you can tinker with it a bit and see if it's a direction you want to go with your project. 

 

See the Pen QBLBRQ by PointC (@PointC) on CodePen

 

Hopefully it gives you some ideas. Happy tweening.