Jump to content
Search Community

Animating backgroundPosition for several background images

PencilBox 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, GreenSock,


I'm trying to animate background-position for two background images. It works fine in Firefox, but doesn't in Chrome.


Demo (codepen got blocked at work, hope jsfiddle is ok):


If you play animation in Firefox, the two images animate up and down nicely and in sync.


If you play animation in Chrome, however, images are also animated horizontally and are out of sync. After the animation is

reversed, the end value of background-position is set to "background-position: 50% 43px, 50% 50%;" which is wrong.


Does anyone know what is going on and how this could be fixed?


Thank you, and I love your library!

See the Pen by dftks9m1 (@dftks9m1) on CodePen

Link to comment
Share on other sites

Thanks for your patience. Currently CSSPlugin does not support animating the properties of multiple background images.

Unfortunately it just isn't something we have seen a lot of demand for.


We will definitely keep our ears (and this thread) open to see what kind of interest there is for these types of features. 


Sorry for the bad news, I hope your dummy-node solution will suffice.

  • Like 1
Link to comment
Share on other sites

Good Afternoon,


Looks like background-position-x and background-position-y CSS properties were first introduced in IE8.




Also looks like Firefox removed background-position-x and background-position-y sometime ago, citing that it never was part of the W3C spec.


Here is a list of all the CSS properties Firefox has listed as animatible:




Currelntly there is a Bugzilla report out to request the adding back of those properties to Firefox...  but there has been no response from Mozilla since those  properties do not exist in the CSS 3 border and background module.



I hope this helps!

  • Like 2
Link to comment
Share on other sites

The issue here is that since this is not an official CSS property (it's being considered for CSS4, but we'll see what happens) the chances of being included in the CSS Plugin are far from good. The guys' rule of thumb in this aspect is that if it's not an official standard, then is not included in GSAP. This basically because if is not a standard, the specification could change in the future, which could mean changing not only the specific plugin but possibly part of the Tweening engine as well. That ultimately could lead to serious compatibility issues for a code that was made based on previous versions of GSAP, which creates unhappy users.


So until this becomes an approved standard by the W3C, we'll have to settle with this type of hacks (which are not too complicated as you can see).

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