CSSPlugIn VS ColorProps

[dada78]

Hi guys,

I would like to simply tween the .banner background from a radial gradient to a linear gradient currently commented out in the codepen. I was hoping to accomplish that with the CSSPlugin. Not sure if I am not using it correctly, but it doesn't seem to be animating...I also imported the colorProps plug-in but am not sure how to implement it exactly.

 

Thanks!

See the Pen ffbf310cca80e586d957ba5129747cae by dada78 (@dada78) on CodePen

[Jonathan]

I am away from my computer at the moment but ... the below code examples use the ColorPropsPlugin and the CSSPlugin. It animates without the use of vendor prefixes for the new syntax. Thanks to Carl for the original solution!

 

Maybe the below can give some ideas until i am near my computer, and more helpful.

 

Here is an example of animating of a cross browser radial gradient:

 

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

:

// new syntax
radial-gradient(<shape> <extent-keyword> at <position>, <color> <percentage-or-length>, <color> <percentage-or-length>);
// shape is either: circle or ellipse
radial-gradient(circle, blue, yellow);

:

Here is an example of cross browser animating of a cross browser linear gradient:

 

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

:

// new syntax
linear-gradient(to <side-or-corner>, <color> <percentage-or-length>, <color> <percentage-or-length>);
// to top, bottom, left, right
linear-gradient(to top, blue, yellow);

:

The syntax changed awhile ago for CSS3 gradients so its more streamlined. You might want to take a look at the following page to get familiar with the new syntax:

 

https://css-tricks.com/css3-gradients/

 

Other resource for cross browser gradients, please see:

• MDN - CSS linear-gradient
• Safari CSS Visual Effects Guide - Using Gradients
• http://www.css3files.com/gradient/
• http://caniuse.com/#search=gradients

Also see GSAP JS Forum Topic:

• http://greensock.com/forums/topic/7774-blending/#entry39565

Hope this helps! :0

[Carl]

GSAP does not support the tweening of CSS gradients currently.

 

Also I'm not even sure that you can tween from Linear to Radial as I don't know what those intermediary values would be.

 

You were definitely on the right track with ColorPropsPlugin. What you can do is tween any color value to any other color value and then apply those new color values using an onUpdate. Its not the easiest thing in the world, but it is possible like this:

 

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

 

Basically I'm taking the color object with top and bottom properties and tweening 

 

color.top from aqua to yellow and color.bottom from blue to green. As that tween updates I'm applying a new gradient to the ".banner"s background

 

function colorize(element) {
  //apply the colors to the element
  TweenLite.set(element, {backgroundImage:"-webkit-linear-gradient(top," + colors.top + ", " + colors.bottom + ")"});
}

If you really need to go from Linear to Radial it might be easier just to cross-fade 2 elements.

 

EDIT: go with Jonthan's solution for the cross-browser stuff !

[dada78]

Ok thanks guys! That helped a lot actually. Let me see what will work best. I will likely just have to modify the creative to go from linear to linear. If all else fails I'll do the cross-fade. Thanks a bunch!