Jump to content
GreenSock

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

SVG Custom Letter Draw Text Effect

Recommended Posts

Hey GSAP!

Looking to recreate this text effect but I have hundreds of different copy blocks needing to achieve this same effect. As of know from my understanding I will need to make a custom SVG mask for each copy block that needs this effect but I was wondering if there was a way I can achieve this effect without the repetitive work.

 

Is there a way to line draw in the text with the split text plugin?

Here is a link to the effect,


Thanks for your time!

Link to post
Share on other sites

@PointC can likely provide more pointed help, but I'll take a crack at this.

 

33 minutes ago, jparrott said:

Is there a way to line draw in the text with the split text plugin?

No, SplitText doesn't work with SVG. Additionally it doesn't work with parts of letters like you're needing.

 

Most likely it'd be easiest to create an SVG version of each letter. It'd probably help a lot to make each letter comprised of multiple paths, each path as the part you want to animate individually. Then you create an animation for each part of each letter for every letter. You could likely write a script to create these animations if they're all pretty similar (and they appear to be). 

 

Once you have all of that done, it should be pretty trivial to dynamically create a word based on the letter animations. GSAP's staggering and timelines should be of great help when it comes to sequencing things. 

  • Like 4
Link to post
Share on other sites

This is to awesome! Thanks for sharing your insights!

This video helped with splitting the text into different shapes in AI


The split letters is to much manual labour so I build a split text version of this effect for each letter so that it is a scale able solution since I will need to do this effect for hundreds of copy blocks in different languages. I used the split text approach to have to different color copy and use the divs that split text provided and having over flow hidden on those div's. This way I can mask each letter in and have a reusable animation for the other copy blocks.

Cheers!

Link to post
Share on other sites

Yeah, asset prep is always the big thing with SVG animations.

 

If you can make the artwork from lines or stroked paths, loops can do a lot of heavy lifting for you. The example you showed above looks like it would work by cloning the original line/path and staggering the original and clone animation.

 

It's not exactly the same, but I do have a tutorial showing dashed lines and cloning in a loop. That way you could easily create a mask or a different color version of the original path/line. Maybe you can find some useful info in it.

 

https://www.motiontricks.com/svg-dashed-line-animation/

 

Happy tweening.

:)

  • Like 4
Link to post
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.

×