This animation simply doesn't work in IE?

[msorrentino]

I just added the gsap library to my web application.  I have a set of notifications that appear, and in the case that it is a "sticky" notification (which can only be dismissed via code and not user interaction) it is meant to shake when it is clicked on.  This works great in all browsers but does not work in IE at all.

 

Apparently the issue is that the element that I am asking to animate with gsap already had a css "transition" property attached to the transform value.  If I remove this property, then it will animate properly.  I have not seen anything in the gsap forums/documentation to explain this behavior however.  

 

To be clear, my web application first makes the notification appear by adding a class (show-notification) to the div, which because of its transition property, animates it into view.  I am then wanting to use gsap to animate it for a bounce animation in certain cases when the user clicks on it.  

See the Pen RazLqx by msorrentino (@msorrentino) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo.

 

It is strongly recommended that you do not mix transitions with GSAP. GSAP has to change the transform of #element to move it along the x axis but your transition is constantly trying to animate the transform values every time GSAP changes them. The 2 are literally fighting for control. The best solution is to remove the transition from your CSS and handle the initial reveal of  #element with GSAP. 

 

If for some reason you can not change that intro animation I would suggest that you keep only the transition CSS in a single class and remove that class from the element when its time for GSAP to do its job.