Jump to content


Tweening backgroundSize property problem for IE9+

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

Hello GS Community! This plugin works fantastic. At the moment I've found out that you can animate the backgroundSize property, I tried it out. Here is my code I tried for Chrome:

var freewayEaseTween = TweenMax.to("#freeway", 10, {backgroundSize: "+=25% +=25%", ease:Power1.ease0ut});

It works gold so far but when I tried it in Internet Explorer 10, it doesn't work. What I did was I changed the unit to pixels like so:

var freewayEaseTween = TweenMax.to("#freeway", 10, {backgroundSize: "+=200px +=200px", ease:Power1.ease0ut});

But this leaves me to a problem that the size won't be any close with what I want with Chrome. Am I missing something here like a browser fix? Thanks in advance!

Link to comment
Share on other sites

Do you have a codepen example you could provide? I just did a quick test in IE and it seemed to work. It'd be super helpful to see a codepen demo. Thanks!

  • Like 1
Link to comment
Share on other sites

  • Solution

The Microsoft developer website shows that background-size is supported in IE9 and above.


Also make sure IE is not in compatibility mode. Press F12 on your keyboard to open the developer window. And then make sure that IE is running in IE9 Standards, IE10 Standards, or IE11 Standards mode, depending on which IE version you are using.


How to configure document modes in IE.


Example that works in Chrome, Firefox, IE9, IE10, and IE11:

See the Pen AigpI by jonathan (@jonathan) on CodePen


Tested on PC - Windows 7 Pro. (64-bit)



  • Like 2
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.