IE10/11 Issue - Animation on Element with Transition

[btuck044]

Hello I am having an issue with animations on IE 10 and 11 and I have found the culprit to be that the element that i am trying to animate has a "transition" style in my style sheet removing this allows the animation to work correctly in IE10/11.  This issue does not exist in other browsers. 

 

As for my animation I am just doing a simple animation: TweenMax.from(element, 1, {x:200, repeat:-1, yoyo:true});

 

Any fix out there for this issue?

 

Thank you

[Shaun Gorneau]

While I'm not diving into the technical reasons behind this particular issue ... a good rule of thumb when using any animation framework is: leave the animation to the framework. Using CSS transitions just muddies the waters since the purpose of transitions is to "animate" changes in property values. I would simply remove the CSS transition and achieve whatever effect they produced with GSAP.

[btuck044]

The transition was a for a simple button hover over. So it would be more efficient to have this hover over be a gsap animation instead? 

[PointC]

Hi btuck044 

 

Welcome to the forum.

 

It can cause conflicts if you try to mix CSS Animations with GSAP Animations. If you're loading and using GSAP anyway, there really wouldn't be any reason to use CSS for any of the transitions. I'd also recommend using GSAP to set() a lot of properties for you before you animate them. It eliminates the need for vendor prefixes so you can cut down on some of the CSS.

 

Here are some blog posts you may find helpful:

https://greensock.com/css-performance

https://greensock.com/transitions/

 

Happy tweening.

[btuck044]

Thank you for the help and feedback!