Jump to content
Search Community

animating multiple css backgrounds?

erikb 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

In this example (based on a snippet from here):

See the Pen syuEf by anon (@anon) on CodePen


I have three background elements.  I am wondering if there is an easy way to:

  • animate the value of the linear gradient background
  • independently animate (different start/stop times, different start/stop values) the background-position and background-size for each background image

Do I need to do the bookkeeping myself for each background, or are there helpful features in greensock I don't want to overlook before I begin this endeavour? 

Link to comment
Share on other sites

Hi Erik,


Right now it can't be done with multiple backgrounds, just one. If you check the following codepen you'll see that apparently works, but if you inspect the element with dev tools, you'll notice that the inline style changes the vertical value of the second background to 50% no matter what you put in the config object:


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


Even further if you add a third value for another background is completely ignored and things get really messy:


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


My believe is that this feature is not considered in the CSS Plugin, although Carl or Jack have the final word in this one and whether or not this will be added in a future release.


In the mean time you could aim to bit more complex solution but not hard at all. You could create a tween for a dummy object with the values you want the backgrounds to animate and pass those in an update callback. If your backgrounds don't animate at the same time, you could tween the object in a timeline to get the sequence you're after:


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


Give that a try and let us know how it goes.



  • Like 5
Link to comment
Share on other sites

I am okay using a proxy object to generate the css string as you've suggested.  Looks like that might be the easiest way.  Thank you!


Regarding animating the linear gradient... is there way to do that simply with greensock?

Link to comment
Share on other sites

Hi Erik,


You're welcome.


For the gradient that's a bit more cumbersome scenario. The easiest part of it is the GSAP part (no surprises there B)). Using the same object you can add the color to a key:value pair and tween that using the Color Props Plugin and then pass that to the object using an update callback. The cumbersome part comes in adding all the vendor prefixes in the update callback:

var div1 = $("#div1"),
    obj = {color1:"rgba(0,0,255,1)", color2:"rgba(0,0,255,0)"};

TweenLite.to(obj, 1,

function upFn()
    .css("background","-moz-linear-gradient(left, "+ obj.color1 + " 0%, "+ obj.color2 + " 100%)")
    .css("background","-webkit-gradient(linear, left top, right top, color-stop(0%," + obj.color1 + "), color-stop(100%,"+ obj.color2 + ")")
    .css("background","-webkit-linear-gradient(left, " + obj.color1 + " 0%,"+ obj.color2 + " 100%)")
    .css("backgroumd","-o-linear-gradient(left, " + obj.color1 + " 0%,"+ obj.color2 + " 100%)")
    .css("backgroumd","-ms-linear-gradient(left, " + obj.color1 + " 0%,"+ obj.color2 + " 100%)")
    .css("backgroumd","linear-gradient(to right, " + obj.color1 + " 0%,"+ obj.color2 + " 100%)");

You can see it here:


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



  • Like 1
Link to comment
Share on other sites

  • 5 months later...
  • 1 year later...

Sorry to bring back this old thread, but since version 1.18.3, released earlier today (04-20-2016), there's no need to use a custom object and the onUpdate callback to apply styles.

var tl = new TimelineLite();

  .to(div1, 5, {backgroundPosition:"100px 100px, 300px 200px, 0px 0px", ease:Linear.easeNone})
  .to(div1, 2.5, {backgroundPosition:"0px 0px, 300px 200px, 0px 0px", ease:Linear.easeNone}, 2.5)
  .to(div1, 1, {backgroundPosition:"0px 0px, 100px 0px, 0px 0px", ease:Linear.easeNone}, 4);

Codepen sample updated:


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


Also as you can see we're able to animate each background at different times, as long as the values for each background don't change from one instance to the next. In the example the first instance of the timeline moves the third background to 0px 0px, the second and third instances keep that value in order to avoid overwrite issues.


Happy Tweening!!

  • 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...