Simple linear gradient animation

[dada78]

Hi guys,

all I want to do is tween the alpha property of the second color in the linear gradient to 100% and I can't figure out what I am missing here! Please advise!

 

Thanks!

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

[Rodrigo]

Hi,

 

I believe you're asking too much from the CSS Plugin. Parsing all that data apparently is not possible, so what you have to do is create a common JS object with a property with a starting value of 0 and then tween that property to 1. Using an onUpdate callback pass that to your element:

var testObj = {a:0};

TweenLite.to(testObj, 3, {a:1, onUpdate: updateGradient});

function updateGradient(){
  $("#demo").css("background","linear-gradient(to top,rgba(255,255,255,0) 0%, rgba(255,255,255,"+testObj.a);
}

If you want a full crossbrowser support you'll have to use all the strings in the callback. I set up an example that can save you from typing some of that code:

 

See the Pen KAuLp by rhernando (@rhernando) on CodePen

[dada78]

Thanks so much Rodrigo!

 

I modified my codepen based on your example and that's exactly what I was looking for! Thanks so much!

 

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