handwriting Animate SVG tspan texts as handwriting animations

[badasukerubin]

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]

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]

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

[Cassie]

Hi there Diana. I'm not seeing how this post and the previous about transformOrigins are related to animating text spans. The previous post from Adam is out of context and was posted 8 months later (it seems like spam to me.)

If you are in need of help could you elaborate or potentially start a new thread with a minimal demo? Thanks so much!