Jump to content
GreenSock

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 4
Link to comment
Share on other sites

  • 8 months later...

Have you tried to use the special property svgOrigin which is part of the GSAP CSSPlugin. It helps with the various browser bugs that deal with transform-origin bugs. svgOrigin fills the gap to fix various transform-origin bugs. Recommended for use with SVG elements to resolve bugs. convert your transformOrigin to svgOrigin. Or play to see which one gives you the best on your SVG child elements.

Link to comment
Share on other sites

  • 2 weeks later...
On 9/13/2022 at 5:09 PM, adamgreen21 said:

Have you tried to use the special property svgOrigin which is part of the GSAP CSSPlugin ( check this out). It helps with the various browser bugs that deal with transform-origin bugs. svgOrigin fills the gap to fix various transform-origin bugs. Recommended for use with SVG elements to resolve bugs. convert your transformOrigin to svgOrigin. Or play to see which one gives you the best on your SVG child elements.

Still having my own issues with this, I cannot seem to get any traction on zooming in to the M.  Once I use the updated svg it just sort of floats off the page.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

13 minutes ago, Cassie said:

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!

I understood, thanks!

  • Like 1
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.
×