Jump to content
Search Community

Handling multi-value css properties

itsmike test
Moderator Tag

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

Hello itsmike, and Welcome to the GreenSock Forum!


In your example i see it working in latest Firefox.


But in latest Chrome (webkit) .. it just jumps to the end position. This looks like a Chrome (webkit) bug, and not a GSAP bug. Since Chrome is ignoring the auto value, and just outputs background-size: 100%; instead of background-size: 100% auto; Looks like this webkit bug is still rearing its ugly head:




The CSS spec states for background-size when only one has a value of auto and one non-auto value, the following behavior happens:

  • If the image has an intrinsic proportion, then render it using the specified dimension, and compute the other dimension from the specified dimension and the intrinsic proportion.  If the image has no intrinsic proportion, use the specified dimension for that dimension.  For the other dimension, use the image's corresponding intrinsic dimension if there is one.  If there is no such intrinsic dimension, use the corresponding dimension of the background positioning area.
  • WebKit-based browsers originally implemented an older draft of CSS3 background-size in which an omitted second value is treated as duplicating the first value; this draft does not include the contain or cover keywords.

Usually in Chrome you can fix this by adding a height:100% on the html and body tags. But this looks like another webkit bug.



CSS background-size: https://drafts.csswg.org/css-backgrounds-3/#the-background-size

webkit bug for background-size auto: https://bugs.webkit.org/show_bug.cgi?id=86880

  • Like 4
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.
  • Create New...