[BUG] Dashed SVG path becomes regular SVG path when Framer Motion animation is applied

[mukhammad-akilov]

1. Read the FAQs 👇

2. Describe the bug
I am trying to animtion path in SVG element which has several solid and dashed lines (craeted with tag).
Solid lines work nice but the dashed ones become solid when animation is applied.
When I remove initial and animate props from maotion.path component the line becomes dashed as expected

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

Link to sand box: https://stackblitz.com/edit/react-vc216w?file=src/App.js

4. Steps to reproduce

Steps to reproduce the behavior:
Everything in inital page in Stack Blitz page

5. Expected behavior

Dashed line should be animated without becoming solid line

7. Environment details

OS: Windows 10
Browser: Google Chrome 111

[mukhammad-akilov]

@mattgperry Please look at this issue

[kaelansmith]

Facing same issue

[mukhammad-akilov]

Facing same issue

I found workround for this issue. You can look at my repo with demo:
https://github.com/mukhammad-akilov/svg-framer-motion

[mattgperry]

This wouldn't really work as expected given the code and I don't think you can "draw in" a dotted line the same way you can draw in a solid line. The reason pathLength works is because at, say 0.25 of the animation, it will output a dasharray like "0.25 0.75" - a line length of 0.25 and spacing of 0.75 until the next segment.