Jump to content
Search Community

Animation running backwards in Safari?

cweber105 test
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

Started using GSAP a few weeks ago and I'm loving it. So easy to make amazing animations. So I have an animation for the main page of my website, but for some strange reason, part of it is running backwards in Safari. It starts with a strokeDashOffset animation for the outline, the fades in the fill by raising the fillOpacity. It runs wonderfully on Chrome, but somehow, the first part of the animation runs backwards in Safari. The strokeOffset starts at 0 (i.e. the outline is present), then slides out, and THEN the fill fades in. So only part of the animation runs backwards, not the whole thing. Any thoughts? I'm not familiar with posting on codepen yet, but I can do that soon if needed.

Link to comment
Share on other sites

Hi cweber105, welcome to the forums and great to hear that you are digging GSAP, you are not alone :)


Posting a CodePen demo would help tremendously, here is a quick guide.


The direction in which the strokeDashOffset is animated depends on the direction it was created in Illustrator, that's just my initial guess without seeing anything.


Post a CodePen and we can look closer.

  • Like 4
Link to comment
Share on other sites

Ok. Here's a codepen for the animation.


See the Pen VaMZzv by cweber105 (@cweber105) on CodePen


It runs fine in the example, but perhaps you can spot something in the code that would cause it to run in reverse in Safari. If it makes a difference, I made the svg in Inkscape. Any input would be appreciated - I'm still trying to get my bearings on a lot of this.

Link to comment
Share on other sites

Thanks for the demo. It really helps if you can reduce it as much as possible. For instance a single path that isn't working.

I didn't have time to dig through it completely but it seems that our DrawSVGPlugin works fine on that svg in Safari




I'm quite certain that in the demo you provided that GSAP is tweening the numbers properly, however I don't know why Safari is applying them funny or maybe you haven't chosen the proper values for the dashoffset and such. Again, It was a bit too complicated.


DrawSVG was designed to work around various browser bugs, not totally sure if there is something specific in your file that is causing the problem but DrawSVG seems to give good results.

  • Like 3
Link to comment
Share on other sites

Ah, sorry for the complex example. I've simplified the codepen a lot. I simplified it down as much as I could on my site too, but it still runs in reverse on safari. I could figure out some hack for safari, but I'd rather figure out what's actually going on. Again, I appreciate any input. =)


See the Pen VaMZzv by cweber105 (@cweber105) on CodePen

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.
  • Create New...