search

sarcadass / granim.js

Create fluid and interactive gradient animations with this small javascript library.
https://sarcadass.github.io/granim.js/
MIT License
5.29k stars 234 forks source link

Improving performance #75

Open RobinAdlung opened 3 years ago

RobinAdlung commented 3 years ago

Hi there. Thank you for providing this library! It is very powerful and easy to use.

I am currently working on a website based live wallpaper and I am planning to use the gradient as a background. My problem is that I cant have it take much of the performance, as I want to add 3D models with three.js on top of it. The gradient canvas will take up the entire viewport size. Unfortunately this stresses out the GPU a lot - even when there is no animation going on.

As I just need transitions between different gradient states at certain events and no permanent looped gradient animation, I wanted to ask if there is an option to safe performance when there is no transition running between gradients and it is just a solid gradient.

Code_2021-07-20_22-09-16

chrome_2021-07-20_22-13-29

Regarding the example file: As you can see, even though it is just a solid gradient it goes heavily on the GPU when displaying the page in Chrome. Is there a way to resolve this issue?

Thank you very much!

sarcadass commented 3 years ago

Hello, Can you please reproduce the issue on codepen or codesandbox ? It will be easier to test on my side. Thank you.