Jump to content


TweenMax.fromTo() bug in Safari for SVG content

Go to solution Solved by Carl,

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

First check this link in Chrome, Firefox and Safari:


Jug Bug


Notice in Chrome and Firefox it animates the scent on rollover... But in Safari it only animates a portion of the tweens. Specifically, the transforms do not work in Safari when calling TweenMax.fromTo().


Interestingly, if you create a simple TweenMax.to() tween, it functions fine. But if you use TweenMax.fromTo() or try to use TweenMax.set() right before calling TweenMax.to() then Safari will not animate the transforms... just standard properties.


I assume this is due to the special SVG browser handling in TweenMax... Most likely it's a bug with TweenMax.set() because I assume TweenMax.fromTo() is just a helper method that actually calls TweenMax.set() before calling TweenMax.to(). Right?

Link to comment
Share on other sites

  • Solution

Hi Elliot,


Thanks for the demo.

If you look in Safaris element inspector you will see that GSAP is in fact animating the opacity and all transforms:



We have recently been alerted to some bugs in Safari when animating css transforms and opacity on SVG elements.

Safari does not render the updates.


Try adding this line of code to your demo:

CSSPlugin.useSVGTransformAttr = true

** use version 1.15.1 **



This will force CSSPlugin to alter the transform attribute on the svg instead of using inline styles. We have seen this work for this particular issue.


In the future, please provide a CodePen (or similar) so that we can test our theories easily. Thanks.

  • Like 2
Link to comment
Share on other sites

Sorry about not putting it into CodePen. I actually started down that road for you, but it wouldn't display my externally hosted SVG which was kind of integral to displaying this bug.

See the Pen vEjvvP by pyrografix (@pyrografix) on CodePen


Do you know why it wouldn't display an external SVG file?

Link to comment
Share on other sites

This one weird trick fixed my Safari bug. Thank you!

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.