animating css gradients
I wish to animate a css gradient but apparently greensock cant do this However it can change any numeric value of a javascript object Could i get the effect i want by doing the following 1) Making a javascript object which stores RGB values for each color I want in my gradient. 2) Using greensock to "animate" the values stored in the javascript object. 3) Setting a JS timer which runs 30 times a second 4) Making a function which changes the css gradient colour value properties with the value
Hello megaman,
GreenSock can animate CSS gradients with great ease!
You just have to make sure your CSS gradient syntax is correct.
Here is an example of a cross browser linear-gradient tween
See the Pen vJwzD by jonathan (@jonathan) on CodePen
And here is a cross browser radial-gradient tween:
See the Pen BeJwd by jonathan (@jonathan) on CodePen
Resources:
MDN Using Gradients: https://developer.mozilla.
