SVG Custom Letter Draw Text Effect

[Parrot Puppet]

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!

[ZachSaucier]

@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. 

[mikel]

 

 

To create an SVG version of each letter is most of the work.

 

See the Pen 0cbfbda806ebb0a472f602f7f19adb03 by mikeK (@mikeK) on CodePen

 

Happy 'typing' ...

Mikel

[Parrot Puppet]

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!

[PointC]

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.