Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
volcanoflash

IE 11 Error while using [] as parameter for TweenLite in JS

Recommended Posts

Hi all!

 

I have some strange error with ie 11 (may be earlier versions too).

 

Here is a simple example of my code:

var gfx_obj = {};
gfx_obj.r1 = 1;
gfx_obj.r2 = 1;
gfx_obj.r3 = 1;
gfx_obj.r4 = 1;

function appearGFX(num)
{
	TweenLite.to(gfx_obj, 1.2, {["r"+ num]:5, ease: Power3.easeOut});
}

appearGFX(1);

So this gives me error in IE only (all other modern browsers is OK).

Screenshot of error is attached.

 

Any thoughts how to fix it?

post-35892-0-60651300-1444931656_thumb.png

See the Pen GpMwVV by anon (@anon) on CodePen

  • Like 1
Link to comment
Share on other sites

Hello volcanoflash, and Welcome to the GreenSock Forum!

 

Can you please setup a codepen example so we can see your code in context to test in IE11.

 

Here is a great video tut on how to create a codepen demo

 

Thanks! :)

Link to comment
Share on other sites

Just added a codepen example.

Press F12 in IE to see the console with error!

Link to comment
Share on other sites

I don't think that syntax is valid JavaScript. It seems to work in Chrome, but honestly I've never seen that syntax before in my life. I wouldn't expect it to work directly inside the {}. Maybe try this instead:

function appearGFX(num) {
    var config = {ease:Power3.easeOut};
    config["r" + num] = 5;
    TweenLite.to(gfx_obj, 1.2, config);
}
  • Like 3
Link to comment
Share on other sites

That's a computed property name, and you should not use it without a compiler because it hasn't been implemented in all browsers.

 

http://greensock.com/forums/topic/12420-tweening-parameter-string-values/?p=51617

I'm afraid that I could not interpretate your description to my example. Could you help me with this?

Link to comment
Share on other sites

I think that Administrators post was exactly about that! It works fine! Thanks for all

Link to comment
Share on other sites

What you are doing is a new feature and won't work in all browsers. Do it just like Jack showed right above my post unless you are using Babel, Traceur, or TypeScript, which will convert the code...

// From this...
TweenLite.to(gfx_obj, 1.2, {["r"+ num]:5, ease: Power3.easeOut});

// Into this...
var _a;

TweenLite.to(gfx_obj, 1.2, (_a = {}, _a["r"+ num] = 5, _a.ease = Power3.easeOut}, _a));
  • 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.
×