Site icon Denis Bouquet

SVG animation direction wrong in Safari only

While animating some path with the CSS property stroke-dashoffset, I noticed a bug in safari where the path would animate backward only in safari but work fine in Chrome, Firefox, etc. Here is the simple fix for Safari.

Safari, SVG path animation running backward, why is that?

All the other browser behaved properly, but in Safari the animation acted in the opposite direction of what I wished.
I simply didn’t set the stroke-dasharray properly. It’s needs to have 2 values minimum. However, I had the CSS set with:

stroke-dasharray: 1500 

Changing it into :

stroke-dasharray: 1500 1500; 

solved this backward behavior in Safari.

Here is my code extract. I have an online SVG of a graphic with the class “path” on the line I want to animate. We make those lines grow using CSS (when the graphic is “is-inview”, I animate the graphic lines).

.is-inview {
     .path {
         stroke-dasharray: 1500 1500;
         stroke-dashoffset: -1500;
         animation: dash 4s linear forwards;
     }
}
@keyframes dash {
   to {
     stroke-dashoffset: 0;
   }
}
Exit mobile version