Hey!It is possible to create and animate a gradient?
handy! I created a class for a "loading bar". :)
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:http://codepen.io/quasimondo/pen/lDdrF
You could also use SVG filters and SMIL, but I wouldn't recommend that. Can read more about here: http://designmodo.com/animate-svg-gradients/
Thanks a lot
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.
CSS is the simplest way, however its not the cleanest. This is probably the easiest way to add it. http://www.gradient-animator.com/
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.
Jake Blakeley What do you mean with "clean" ?
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.
I was hoping there was a dedicated function. I did not understand how to use CSS with framer js or a svg solution.
Do you have an example of what you're looking to achieve?
http://codepen.io/quasimondo/pen/lDdrF It is very similar to this