Custom Marquee effect using MotionPath and SplitText

[hobiew]

Hi, 

 

I'm trying to make a custom marquee effect. The letter should follow a custom path I can define with an SVG element. I got it working pretty decently. However the letter kerning is messed up.

 

Since it probably equally spaces every letter when splitting and dividing them alongside the path. It does not take into account the kerning of the font. Atleast thats what I think.

 

I tried using textPath right in the SVG, however that does not respect text-anchor="middle" and places the text above the line. So i got to a dead-end there. Any tips/suggestions are very welcome!!! ❤️

See the Pen NPqqQxY by hobiew (@hobiew) on CodePen.

[Rodrigo]

Hi,

 

Maybe this thread can help:

Also is worth noticing that this is far easier with the text inside the SVG element as shown in these demos by @PointC

See the Pen VwjJaqw by PointC (@PointC) on CodePen.

See the Pen Vwaajwy by PointC (@PointC) on CodePen.

 

Finally check this threads as well:

 

Hopefully this helps

Happy Tweening!