ColorProps? Tweening from one linear-gradient to the other linear-gradient

[venn]

I am trying to figure how the colorProps plugin works?

 

I have a div #bgGrad with a linear-gradient background and I would like to tween it to ANOTHER linear gradient.

 

How do I do that? I tried

TweenMax.to("#bgGrad", 1, {colorProps:{background:"linear-gradient(#ffffff, #007dba, #004165)"}});

but in vain...

[venn]

Or do I need to follow this example http://codepen.io/jonathan/details/vJwzD/ ? 

 

There are few other solutions that I have googled, animating linear gradient with Javascript, they aren't the most straightforward.

[Jonathan]

Hello venn, and Welcome to the GreenSock Forum!

 

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

 

The syntax is very important since browsers like Chrome will keep changing the syntax instead of using the standard syntax for CSS gradients. Chrome will still want the webkit prefix even though at beginning of last year they honored the standards syntax and now they don't. So to play it safe make sure to use the webkit prefix and the older gradient syntax.

 

So you will notice in my codepen examples that i do a check for if the browser is Chrome, since Google Chrome can be a real poopy pants, changing what it expects as proper syntax for CSS gradients.

 

Keep in mind that not declaring an angle will assume to top (top-to-bottom):

 

Proper syntax for CSS linear-gradient:

// new syntax
linear-gradient(to <side-or-corner>, <color> <percentage-or-length>, <color> <percentage-or-length>);
// usage:
linear-gradient(to top, #3e3e40, #252122);

Also see GSAP JS Forum Topic:

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

Resources:

MDN Using Gradients: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients

MDN Linear Gradients: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

CSS Tricks Gradients: https://css-tricks.com/css3-gradients/

 

[venn]

Thanks for the comprehensive reply Jonathan. Much appreciated.

 

Looking at the documentation,

http://greensock.com/docs/#/HTML5/Plugins/ColorPropsPlugin/

TweenLite.to(myObject, 1, {colorProps:{borderColor:"red", myCustomProp:"rgb(204,51,0)"}, ease:Linear.easeNone});

It seems that the first parameter is an object within the DOM? 

However it the codepen examples you have posted, you declare a variable to store the color value?

And then you apply the ongoing changing of the gradient color to the element using the onUpdate callback.

 

Am I right to say that, if you are tweening gradient colors that will be the only way to do it?

 

-

 

The documentation that is written I don't quite get it...

It says it is not intended for CSS related properties. However isn't changing borderColor a CSS property?

TweenLite.to(myObject, 1, {colorProps:{borderColor:"red", myCustomProp:"rgb(204,51,0)"}, ease:Linear.easeNone});

Is this particular line of code saying "Change myObject's borderColor from red to a rgb(204,51,0)" ?

[Carl]

In the cases in the docs,  myObject is not supposed to be a DOM element. GSAP is in no way tied to the DOM so ColorPropsPlugin was written for those cases where you aren't animating CSS colors with the CSSPlugin. Imagine working in a <canvas> tool for designing a kitchen. You may have a kitchen object that holds values of colors for some of its elements. At some point you may tween kitchen.applianceColor and that will animate the color of the refrigerator and dishwasher... the kitchen object may look like this:

var kitchen = {
   floorColor:"red";
   applianceColor:"black";
}

CSSPlugin does not directly support animating CSS gradients (due mostly to the large disparity in syntax across browsers over time).

[venn]

Thanks for the clarification Carl. 

 

+1 GSAP skill.