handwriting Animate SVG tspan texts as handwriting animations

[badasukerubin 1 Likes (Newbie)]

Hi, I have a SVG text and I'd like to animate it as though someone was writing it. I know it'd be easier with paths elements but I have it as tspans instead.

I have tried using drawSVG but it seems that only works with paths.

Any help is totally  appreciated.

 

The SVG code:

<g id="Group_80" data-name="Group 80" transform="translate(-649.918 -257.351)">
                <g id="Brand" transform="translate(652.062 329.976)">
                    <text
                        id="Check_me_out_and_see"
                        data-name="Check me out and see"
                        transform="matrix(0.985, -0.174, 0.174, 0.985, 0, 88.908)"
                        stroke="#000"
                        strokeWidth="1"
                        fontSize="65"
                        fontFamily="Satisfy-Regular, Satisfy"
                    >
                        <tspan x="0" y="61" ref={bstext}>
                            Check me{' '}
                        </tspan>
                        <tspan x="0" y="155">
                            out and{' '}
                        </tspan>
                        <tspan x="0" y="249">
                            see
                        </tspan>
                    </text>
                </g>

A screenshot:

 

Thanks

[Cassie 3,753 Likes (Superhero)]

Hey there!  It needs to be paths. DrawSVG animates the stroke of SVG paths and shapes. Not text.

It's not particularly a 'plug and play' effect (certainly not just pointing a plugin at some text). There's a lot of prep that goes into it before you get to coding. But it looks great so it can be worth the effort.

Here's a great article series outlining the steps from @PointC

https://www.motiontricks.com/animated-handwriting-effect-part-1/

[badasukerubin 1 Likes (Newbie)]

Alright @Cassie , I'll check it out. Thank you!