Jump to content


TweenMax Animation removes CSS hover effects

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

Hey guys,


just experienced this the second time. I make an animation on a menu-item, which has a hover effect (pure css, item:hover).


But after the animation is done, the hover effect no longer works.


Is there a solution to this? 



Thanks in advance

Link to comment
Share on other sites

Hello LilaQ, and Welcome to the GreenSock Forum!


Do you have any code or a code example showing this behavior?


Here is a nice video tut by GreenSock on How to create a codepen demo example!


This way we can see your code, with context..  to better help you!


Thanks :)

  • Like 2
Link to comment
Share on other sites

yeah, like Jonathan said, we would need to see an example. I'm sure what you are describing will only take a few lines of css / js to illustrate.


Keep in mind that when you animate a DOM object with TweenLite it has to put inline styles on the element that is being animated. These styles are more specific than your css rules. 


You can remove styles that TweenLite adds by using

TweenLite.set(yourElement, {clearProps:"all"}); // or clearProps:"left,top,whatever"

If we can see a demo I'm sure we can help you find a solution.

Link to comment
Share on other sites

A codepen demo would be great - this sounds like maybe a case where the inline style (which is what GSAP affects) is overriding some other css that you're wanting to apply via a class or something. If that's true, you can either use GSAP's clearProps special property to remove the inline styles (add clearProps:"all" or clearProps"left,top,whatever" - a list of properties) or you can just use GSAP to do your hover animation too (which is probably what I'd recommend because GSAP is far more flexible and it manages overwriting for you, is more compatible, etc.)


EDIT: ha, Carl and I were typing at the same time ;)

Link to comment
Share on other sites

--- left,top,whatever --- and the same exact thing. scary.

  • Like 1
Link to comment
Share on other sites

clearProps was exactly what I was looking for, thanks!


Greensock makes just perfect pieces of software, I am more and more amazed every day, and very glad that I decided to get a business licence.


I have been using your software since 2010 (AS3 days), and just want to say thanks for this wonderful state-of-the-art piece of software and the awesome support.


Big, big thumbs up, guys!


Best wishes,


  • Like 2
Link to comment
Share on other sites

Thanks for the kind words. So glad to hear how pleased you are with the platform. Your Business membership goes a long way towards making it all possible.

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.