This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Pietro Spagnolo
Posted Apr 18 - Read on Facebook

It is possible to create and animate a gradient?


Jon Madison

handy! I created a class for a "loading bar". :)

Andreas Mitschke

There are actually multiple ways.

The easiest and fastest also lightest way would be to use the structure that is meant to style the web, namely CSS. You could use a stack of CSS gradients and fade them away as needed, means animating the opacity of respective layer.

You could also opt to use js with arrays that fill CSS properties like this here:

You could also use SVG filters and SMIL, but I wouldn't recommend that. Can read more about here:

Pietro Spagnolo

Thanks a lot

Andreas Mitschke

Depends on what you want to do, I'd go with the CSS solution, but regarding you are using framer as environment it might be easier to use a js solution.

Jake Blakeley

CSS is the simplest way, however its not the cleanest. This is probably the easiest way to add it.

The cleanest looking way is to create the gradient in SVG, import the SVG as you would html elements, then animate the stopColor values of stop elements inside the gradients via JS.

Andreas Mitschke

Jake Blakeley What do you mean with "clean" ?

Jake Blakeley

Just visually CSS gradients, although faster, have a lot of banding unless you choose your colours very carefully. Whereas SVG gradients do not have this banding at all.

Pietro Spagnolo

I was hoping there was a dedicated function. I did not understand how to use CSS with framer js or a svg solution.

Jordan Robert Dobson

Do you have an example of what you're looking to achieve?

Pietro Spagnolo It is very similar to this

Jordan Robert Dobson

Or you could just use that JavaScript. :)

Read the entire post on Facebook