Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by itsmike

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



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