[Bug] Motion One for Vue examples SVG path drawing doesn't work as expected

[Znonymous29]

1. Describe the bug

The svg path animation doesn't work as expected. It should move on track after loading, but actually it shows immediately .

2. IMPORTANT: Provide a CodeSandbox reproduction of the bug

The example SVG path drawing https://motion.dev/vue/examples#svg-path-drawing

3. Steps to reproduce

reload page.You should see the path appear without an animation.

4. Expected behavior

I expect the path to appear with an animation the first time I open the page.

5. Video or screenshots

6. Browser details

Bug occurs when using Windows 10 and when using chrome (105.0.5195.102) .

[Znonymous29]

Finally, I found the reason. The strokeDashoffset of path should be mounted in Motion Component as initial props, not in css. https://codesandbox.io/s/objective-hellman-g43h7h?file=/src/App.vue

<template>
  <Motion
    tag="circle"
    cx="100"
    cy="100"
    r="80"
    pathLength="1"
    :initial="{ strokeDashoffset: 1 }"
    :animate="draw(1)"
    :transition="{ duration: 0.8, delay: 2 }"
  />
</template>

<style>
circle,
path {
  fill: transparent;
  stroke: green;
  stroke-width: 6px;
  stroke-dasharray: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  visibility: hidden;
}
</style>

Examples SVG path drawing should be modified.

[hi-reeve]

this should be fixed