Multiple colors linear gradient animation

[MT]

Hi,

 

I've read a thread regarding animating linear-gradients but i don't understand how can I animate more than 2 colors in a linear-gradient.

 

Example:

 

The CSS would be:

 

Out state: linear-gradient(to top, #2f2f2f 0%, rgba(255, 255, 255, 0) 100%)

 

Over state: linear-gradient(to top, #d92255 0%, #b753f3 50%, #7180ac 100%)

 

As you can see on over I use 3 colors. As per an example I saw there you define top and bottom colors.

 

Isn't there a way to animate the direct css like we do on a simple CSS property. For example:

 

TweenMax.to( obj, .3, { css: { background: "linear-gradient(to top, #d92255 0%, #b753f3 50%, #7180ac 100%)" } } );

 

If i use the code above, there is no animation, only the change of the background like a normal CSS class.

 

Thank you!

See the Pen vJwzD by jonathan (@jonathan) on CodePen

[Carl]

You can animate multiple colors in gradients as long as the starting and end gradients have the same amount of colors

 

http://codepen.io/GreenSock/pen/56dc377001d36c64c154cc3a120098cb?editors=1111

http://codepen.io/GreenSock/pen/c441e8b3071273acdc9254a221f88717

http://codepen.io/GreenSock/pen/b384868de31e4ca46fb82f89c741f258?editors=0010 (multiple stops)

 

The CSSPlugin doesn't do anything special for gradients it just sees a big string with multiple numbers. It finds the first number in the start value and animates it to the first number in the end value, it finds the second number in the start value and animates it to the second number in the end value. So if you have 3 numbers in the start value and 5 in the end value... you are going to hit a problem.

 

We just haven't seen enough demand for multi-color gradient mismatching to create a custom solution, especially with so many other high-demand features in the works. 

 

Perhaps instead of animating one gradient to another you can do a cross-fade of two elements. Or maybe there is way to inject an extra color in the middle of the first gradient so that it has a "fake color" in the middle that still looks the same as a 3-color gradient

 

http://codepen.io/anon/pen/WoLRjg

[MT]

Hi Carl,

 

Yes I've tried animating when having different amount of colors and saw that is not working. I will use CSS after and before then with opacity.

 

When you guys will have the time and find a clean solution send an email.

 

Thank you to all of you for the great job you are doing.

MT