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

[volcanoflash 121 Likes (Specialist)]

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?

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

[Jonathan 5,176 Likes (Superhero)]

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!

[volcanoflash 121 Likes (Specialist)]

Just added a codepen example.

Press F12 in IE to see the console with error!

[GreenSock 8,117 Likes (Superhero)]

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);
}

[OSUblake 9,990 Likes (Superhero)]

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

[volcanoflash 121 Likes (Specialist)]

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?

[volcanoflash 121 Likes (Specialist)]

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

[OSUblake 9,990 Likes (Superhero)]

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));