itsmike

Hi Jonathan, that does indeed look like a Chrome / Webkit issue, thanks for the quick reply!

I'd like to tween a CSS property that accepts multiple values, but I only want to tween one of the values. The values specify the width and height of a background image.

With this starting CSS:

background-size: 50% auto;

And this object passed to GSAP:

{backgroundSize: '100% auto'}

I'd expect the 'auto' value to be passed through to the CSS so that during the animation the element's backgroundSize property looks something like this:

background-size: 51% auto;
background-size: 52% auto;
background-size: 53% auto;
background-size: 54% auto;
background-size: 55% auto;
background-size: 56% auto;

But it seems that GSAP doesn't handle the 'auto' value, resulting in no animation at all. 

Is there any way to work around this? The animation works as expected if I use a values like '50% 50%' or '100% 100%', but I specifically want the browser to calculate background height (auto) based on the background width.

Check the console in the linked codepen for example output. Uncomment the html / js for the red box to see how it looks when it works.

Thanks!

See the Pen KVVGOv?editors=101 by anon (@anon) on CodePen