Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
PencilBox

Animating backgroundPosition for several background images

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

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Thanks for a quick reply, Carl.

 

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

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

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.

  • Like 4
Link to comment
Share on other sites

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.

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.

 

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!

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