Jump to content
Search Community

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

fakeartist test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

Link to comment
Share on other sites

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 
   }​

  • Like 4
Link to comment
Share on other sites

  • 9 months later...

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.

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

  • 1 year later...

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
 
 

 

 

Link to comment
Share on other sites

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:

Also see GSAP JS Forum Topic:

 

Hope this helps! :)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...