Hey everyone, there doesn’t seem to be too much in the way of the docs with React Spring, but I’m pushing through. I think I have the basics, but I am looking for a good source for an outlined letter as an SVG, and then learn how to implement a tracing effect of the letter on page load. I believe what could do it is strokeDashoffset={props.<animation>} with React Spring (as seen on this page with the circle and star examples — https://www.react-spring.io/docs/props/spring).
I know it also has to do with the SVG having a property of stroke & possibly stroke-width? Perhaps this is possible with CSS, but not in the way of performance and smooth animation that Spring gives.
Any help is greatly appreciated.
So I seem to have it working with this code! Now I just need to find a proper SVG for a letter!
<Spring
from={{ x: 200 }}
to={{ x: 0 }}>
{props => (
<svg
width="50px"
height="50px"
strokeDashoffset={props.x}
>
<path fill="none" stroke="gold" stroke-width="1" strokeDasharray="60" d="M7 2v11h3v9l7-12h-4l4-8z" />
</svg>
)}
</Spring>
Hey there, wondering if you’ve come to a solution. I am using Figma to save the letter as an SVG using the following tutorial:
be sure to follow the instructions to get the SVG template he’s using if you want a similar effect, in my experience with Figma following this tut, it wasnt really intuitive to get the desired effect. Either way, im asking if you found a solution because the outcome from trying to take this tut and animate the SVG with react-spring was that some of the letters would not fully render. I uploaded an image as an example:
Ive fiddled with it for quite some time with everything that could be adjusted and i tried some workarounds as well, all to no affect. To clarify, some letters do turn out with their paths fully stroked out, while certain letters such as in this case (with this font at least, not sure about other fonts) do not.
If you were able to reach a more elegant solution, could you provide the steps?
