How can I animate background-image: -moz-linear-gradient(top, #3e3e40, #252122);

[fakeartist 0 Likes (Newbie)]

Hi!

I was wondering, I have a btn like this:
 

#my_btn {
background-image: -moz-linear-gradient(top, #3e3e40, #252122);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #3e3e40), color-stop(1.0, #252122));
background-color: #DDDDDD;
}

How can I animate the background gradient on roll over? I tried the code below but it doesnt work.
 

var mybtnOnOver = $('#my_btn');
mybtnOnOver.hover(function() { //mouseover
TweenLite.to($(this), 1, {
css:{
backgroundImage: '-moz-linear-gradient(top, #ACAC8F, #ACAC8F)'
}
});
},function() { //mouseout
TweenLite.to($(this), 1, {
css:{
backgroundImage: '-moz-linear-gradient(top, #3e3e40, #252122)'
}
});
});

In general where can I find the css properties that are supported?

Thanx a lot for any answers!

Cheers!

[Carl 9,066 Likes (Superhero)]

In general the CSSPlugin does not currently support CSS3 properties that aren't yet standardized. Word on the street is that 3D transforms and possibly some effects like blur or shadows are in the works. I don't know where gradients fit into the roadmap. As you probably know their support and implementation (syntax) varies wildly across browsers.

 

No worry, you can still use GSAP for gradient animations. The trick (for now) is to use the awesomely powerful ColorProps plugin to tween your color values and then manually update your background-image style using the new colors.

 

Read about the ColorPropsPlugin : http://api.greensock.com/js/com/greensock/plugins/ColorPropsPlugin.html

 

Here is a webkit demo of animating a background gradient using TweenMax : http://jsfiddle.net/geekambassador/cdWhF/

 

here is the js:

 

//activate ColorPropsPlugin
TweenPlugin.activate([ColorPropsPlugin]);

//object to store color values
var myObject = {color0:'#ffffff', color1:'#000000'};

var target = document.getElementById('box');

//tween the color values in myObject
TweenMax.to(myObject, 2, {colorProps:{color0:'#000000', color1:'#ffffff'}, repeat:10, yoyo:true, ease:Linear.easeNone, onUpdate:applyProps});

//apply new color values to gradient css of target
function applyProps(){
  target.style.backgroundImage = '-webkit-gradient(linear, left top, left bottom, color-stop(0.00,' + myObject.color0 + '), color-stop(1.0,' + myObject.color1 + '))';

   //feel free to target other browser vendors 
   }​

[fakeartist 0 Likes (Newbie)]

Wow! Thanx a lot for your fast and complete answer!

 

Guess I'll dig in ColorProps plugin then.

 

Thanx again!

 

Cheers

[qbunt 0 Likes (Newbie)]

Hey man,

 

Just wanted to pass this along, I've attempted to use the above snippet in the JS lib (huge fan by the way). If you implement this tweening approach with TweenMax, you'll get update events, but you won't get any changes to the color object.  

//tween the color values in myObject
TweenMax.to(myObject, 2, {colorProps:{color0:'#000000', color1:'#ffffff'}, repeat:10, yoyo:true, ease:Linear.easeNone, onUpdate:applyProps});

//apply new color values to gradient css of target
function applyProps(){
   target.style.backgroundImage = '-webkit-gradient(linear, left top, left bottom, color-stop(0.00,' + myObject.color0 + '), color-stop(1.0,' + myObject.color1 + '))';
    
    // I get no updates here, though it does fire onUpdate 
    }​

However, if I attempt the same thing with Tweenlite, I get updates to that object just fine, though the property I get back is RGBa. Is it supposed to work with Tweenmax as well?

 

I realize that tweening gradients is definitely not ideal, as syntax and features are still in flux, just wanted to give you a heads up that something might be up. Thanks man.

[GreenSock 8,117 Likes (Superhero)]

Hmmm...sounds like maybe you just forgot to load the ColorPropsPlugin maybe? I tried your code and it worked perfectly for me using TweenMax (and TweenLite of course). If you're still having trouble, would you mind posting a simple codepen or jsfiddle that clearly demonstrates the issue? 

[reduxdj 0 Likes (Newbie)]

OK this code doesn't work using:

 

TweenPlugin.activate([ColorPropsPlugin]);

ReferenceError: ColorPropsPlugin is not defined

 

The plugin name is a string  "colorProps", not a global variable ColorPropsPlugin

 

Any suggestions? How about a working example.  Also, some of the examples in pre tags aren't able to be selected, that's frustrating. Just want to try a working example with background gradient working.

 

Can a better example of this be posted under the plugin?

 

Thanks

 

 

 

 

[Carl 9,066 Likes (Superhero)]

here is an animated gradient background for Firefox using ColorPropsPlugin

 

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

 

Also, not sure what you mean about not being able to select code in pre tags. Can you elaborate? 

I just copied code off the ColorProps page and docs with no issues.

[Jonathan 5,176 Likes (Superhero)]

I am not seeing an issue with Carl's example.. it animates just fine

 

New CSS3 gradient syntax. Here are other examples that animate a linear and a radial gradient with GSAP with ColorPropsPlugin - cross browser (Firefox, Chrome, IE10+) using new syntax. Please note that not declaring an angle will assume to top (top-to-bottom):

 

linear gradient:

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

 

radial-gradient:

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

 

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

:

Resource for cross browser gradients, please see:

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

Also see GSAP JS Forum Topic:

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

 

Hope this helps!