Jump to content


SVG animation does not run in Safari

Moderator Tag

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 have created a small test animation here. In Codepen it runs without problems. But when I save the SVG locally it runs perfectly in Chrome, Firefox, even Internet Explorer. But Safari simply does not access the plugin. Can someone give me a hint? Thanks!

Bildschirmfoto 2017-10-03 um 15.40.13.png

See the Pen yzzEgr by AniHoe (@AniHoe) on CodePen

Link to comment
Share on other sites

Hello @AHoe have you included the GSAP library in your HTML?

Link to comment
Share on other sites

Hi @Dipscom
Yes, like this: 

       <script type="text/javascript" href="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>


Link to comment
Share on other sites



I've downloaded your Pen and opened it on a couple of browsers, all worked fine which leaves me to assume you are not doing that. What exactly were the steps you took to end up in the situation you are in?

  • Like 4
Link to comment
Share on other sites

it looks like you're script tag is inside the SVG code.

Try placing it outside the SVG.


I suspect Safari has some security restriction preventing you from running it inside the SVG.

Perhaps something here helps: https://stackoverflow.com/questions/1797203/how-to-load-an-external-javascript-script-to-pure-svg-document

  • Like 6
Link to comment
Share on other sites

Yep, I bet Carl is right. 


Also, I'd strongly recommend using the latest version of GSAP (1.20.3 as of today). The 1.18.4 one is pretty old. :)

  • Like 4
Link to comment
Share on other sites

And if you have code inside your SVG, you should probably wrap it with CDATA markers.


<script type="text/javascript">
  // your code goes here



  • Like 3
Link to comment
Share on other sites

Thanks guys!! 


Now it runs perfectly. Tho problem was actually that I had the JavaScript inside the SVG. Also, I have linked with "href" and not with "src" ;-)

  • Like 1
Link to comment
Share on other sites

Ah, sorry, I didn't click you wanted to encapsulate the JavaScript into the SVG.


(Not that I'd known from the top of my head how to solve it, though... :| )

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.