Animating backgroundPosition for several background images

[PencilBox]

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):

http://jsfiddle.net/dftks9m1/3/

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

[Carl]

Thanks for the demo and kind words.

Yeah, it seems like there is an issue with Chrome and multiple background images.

We will look into this further and let you know what we find.

[PencilBox]

Thanks for a quick reply, Carl.

 

I've added a dummy node to hold the second background image as a work-arond for now.

[Carl]

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.

[Rodrigo]

Hi,

 

Another option is use an onUpdate callback while tweening the values of an object. This pen was made some time ago with that in mind:

 

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

 

This is the thread:

 

http://greensock.com/forums/topic/9644-animating-multiple-css-backgrounds/

 

Hopefully this helps.

 

Rodrigo.

[PencilBox]

Noticed another peculiarity: tweening "background-position-y" instead of "backgroundPosition" works properly in Chrome, and doesn't work at all in Firefox.

 

As far as I understand, it shouldn't even tween with "background-position*" at all, in any browser. http://jsfiddle.net/dftks9m1/8/

 

Thanks for another option, Rodrigo.

[Carl]

I know this is old but I haven't seen evidence stating that those properties are supported in all browsers.

 

http://stackoverflow.com/questions/9653685/is-background-position-x-background-position-y-a-standard-w3c-css-property

[Jonathan]

Good Afternoon,

 

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

 

https://msdn.microsoft.com/en-us/library/ie/ms530719%28v=vs.85%29.aspx

 

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:

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

 

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.

 http://www.w3.org/Style/CSS/Tracker/issues/9

 

I hope this helps!

[Rodrigo]

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