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!