Path Animation Issues in Safari

Certain path animations might look different or even broken in Safari as it doesn’t translate negative values for animating paths as Chrome or Firefox does.

You can fix this by avoiding the use of negative values for path animations.

Negative values for the Offset property are often used to create a self-erasing effect. As you can see in the example below where 199.64 is the path's length, the stroke will draw itself from the first keyframe to the second one, and it will erase itself from the second keyframe to the third one. For this, we've used a negative value on the first keyframe.

svg animation — Safari doesn't support negative offset values, like in the animation above

You can avoid the use of negative values for the Offset property if you replace them with multiples of the path's length. The example below is the same animation, with positive offset values used:

Practically, we took the path's length and used multiples of it for the Dashes and Offset properties, in this order:

Length x1 - Length x2 - Length x3

To make things easier, we've added a multiplier:

If you've got stuck and couldn't fix the error, you can also send us the original static SVG file. Please don't forget to mention the email address that you've used to sign up on SVGator and the project's name.

How to create a path animation

Stroke-path animation explained

Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.

Path animation issues in Safari