Jump to content


This animation simply doesn't work in IE?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.