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

[volcanoflash]

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]

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]

Just added a codepen example.

Press F12 in IE to see the console with error!

[GreenSock]

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]

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]

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]

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

[OSUblake]

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