Background-position % doesn't work.

[Dave Stewart]

Tweening background-position with percentages doesn't seem to work.

 

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

 

Should this be so?

[Carl]

Hmm, I'm seeing that they do work:

http://codepen.io/GreenSock/pen/uxiDg

 

However, its important to note that in css background-position with percent values is an odd bird:

http://www.sitepoint.com/css-using-percentages-in-background-image/

 

Sorry, didn't see your previous pen, but if you make your divs wider and taller than the bg it should work fine.

[Dave Stewart]

Thanks for the link.

 

Wow... that is completely counter intuitive!

 

Such a shame, as animating the background image like that is simply the most logical choice for pretty much any background-looping animation.

 

I wonder if this might be a good option for a plugin?

 

I'd asked in a previous thread whether the plugin architecture was documented. I haven't seen any, but I'm sure I could pick-apart an existing one and go from there.

Anyway, thanks very much again for the info. Very useful.

[GreenSock]

Sure, check out the TweenPlugin source (and docs). That should give you a pretty solid idea of how things work. http://api.greensock.com/js/com/greensock/plugins/TweenPlugin.html

 

Does that help?

[Dave Stewart]

That's great Jack. Thanks!