Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
badasukerubin

Animate SVG tspan texts as handwriting animations

Recommended Posts

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:

image.png.13fc3bfef7a0585024b8d6313a8c9871.png

 

Thanks

Link to comment
Share on other sites

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/

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×