Jump to content


tweenlite.to hover issues

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

When utilizing TweenLite.to and scale in a project with <svg> graphics, I've noticed that FireFox and IE11 (not Edge and untested on <IE11) treat my container as though it were "layered". Each time the mouse hits the <svg> graphic inside the <div> it treats it as if I've left the container and minimizes the resulting scale. This causes a "jerky" effect and looks broken to a normal user. I've verified this by watching the console for when I enter and when I leave. Chrome/Edge do not exhibit this behavior and I cannot see how to "fix" this for Firefox/IE11.


**The CodePen is only a partial example of the full project (3 wedges vs. 8) but the effect is the same**


Things I've Tried:


Adding the correct class on my <path>, <symbol>, <g>, etc => same result

Changing the variable class/id to hit higher in the document => same result

Verbally abuse my computer => same result


Any ideas?


See the Pen wzKGvW by dharrah (@dharrah) on CodePen

Link to comment
Share on other sites

Not sure what the issue is. I just tried some other demos in Firefox, and they didn't render correctly.

See the Pen 9b195f9339e6b7667dd74b52cc40ea3b by osublake (@osublake) on CodePen


You might be better off asking Sara what's going on. It doesn't look that tool has been updated in awhile.


  • Like 1
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.