IE9-IE10 Not working with Angular + Ionic

[ghost]

Hi,

Nice plugin, tried to use it with ionic and angular, but the animation doesn't work on IE 10 and IE 9 :(

Maxim

[mattgperry]

Hi @maksz

Do you get any errors in your console? Can I see some of the code you're trying to run?

Thanks

[ghost]

Hi,

Here is the code :

             var ProgressActor = new ui.Actor({
                element: document.getElementById('timer_progress'),
                 values: {
                     opacity: 0
                 }
            });

             var ProgressAnimation = new ui.Tween({
                 values: {
                     opacity: 1
                 },
                duration: 500
             });

             ProgressActor.start(ProgressAnimation);

Works well in other browsers, no errors. The image gets an opacity of 0 on IE but never goes to 1 ( it like the animation never starts )

[mattgperry]

I'm going to take a look myself as I'm fixing some IE10 bugs at work anyway - but in the meantime could you add

onFrame: function(o) {
console.log(o)
}

As a property on either your Tween or Actor and let me know if it prints anything out to your console? I always start there when I'm debugging.

[ghost]

Thank you for your work, but I switched back to GSAP, it works in my case angular 1.2 and ionic beta 13 that is compatible ie9. Will use it an other time when I will not be constrained to angular and ionic ....

[mattgperry]

No worries, I actually think this is a bug with the Babel transpilation of Popmotion rather than a specific Angular / Ionic compatibility bug. I'll let you know when I've fixed it still, the extra 22kb of TweenMax can be quite expensive depending on what you want to do (although can you put a price on "it actually works"!)

[ghost]

Thank your for your comprehension :) I used TweenLite, it's enough for what I want to do :) Css Animation fails short for browser compatibility

[mattgperry]

I've just pushed 4.2.1, this contains the fixes to get it all working for any future projects you might have, and I'm going to make a fork of the babel transformers we use because it's a custom set, should prevent future issues.

TweenLite is very tiny! In your opinion is there any value in offering a version of Popmotion that's stripped of all the CSS compatibility stuff and does raw numbers? It'd probably be around 8kb vs 12kb. Or too little of a difference to matter?

Thanks for your time, sorry about the issues!

[ghost]

Yes true, I had to include CssPlugin to make TweenLite to work with css ... 9kb TweenLite + 15 kb CssPlugin = 24 Kb (Gzip) VS 36Kb TweenMax (Gzip). Sure it's better to use Popmotion which is 13 Kb (Gzip)

In your opinion is there any value in offering a version of Popmotion that's stripped of all the CSS compatibility stuff and does raw numbers? No

[mattgperry]

@MaksZ Thanks for your input man!