DEV Community

Cover image for Animate text along a path (it's easy)
Rob OLeary
Rob OLeary

Posted on • Updated on • Originally published at roboleary.net

Animate text along a path (it's easy)

It is easy to animate text along a path. You can use it to make some fun effects. All you need is some SVG and a sprinkle of JavaScript.

This is a short interactive tutorial. It is best viewed in Full Page Mode on Codepen.

Discussion (10)

Collapse
adam_cyclones profile image
Adam Crockett • Edited

Umm you know this can be done with one (alright two) CSS property right? Nope not many people do 😉.

developer.mozilla.org/en-US/docs/W...

Collapse
robole profile image
Rob OLeary Author

Thanks for sharing. I wasnt aware of that property. The MDN doc says it requires 2 properties for the animation and is still experimental. I wouldnt see it as an automatic choice, but its cool that its an option in CSS now.

Collapse
adam_cyclones profile image
Adam Crockett • Edited

Two both points yes I know. But also I said you can and that is true, you can. It's supported without a flag, so to me, it's certainly a viable progressive enhancement. This sort of animation is not critical so I'd probably ask why is it not an automatic choice vs the Js and and svg route. But I guess I'm more of the opinion that not everyone can expect the same experience because it's impossible and progressive enhancement offers a way of managing that scope.

Thread Thread
jamesthomson profile image
James Thomson

This sort of animation is not critical

That entirely depends on the requirement (most often dictated by the client). If the animation is a fixed one, then sure a pure CSS approach might do, but if you need anything dynamic such as keyframe animations then that approach won't work.

Thread Thread
adam_cyclones profile image
Adam Crockett

Web Animations API === dynamic

Thread Thread
jamesthomson profile image
James Thomson

Right, but now you've stepped into the browser API & javascript which contradicts your above comment, unless I've misunderstood your point.

Thread Thread
adam_cyclones profile image
Adam Crockett

I am not pro css only. I'm pro native specifications. I didn't say anything about not using JavaScript, I just would use the least I could get away with. I have used this method with Web Animations API which is less code than the proposed solution, has documentation etc.

Thread Thread
jamesthomson profile image
James Thomson

Gotcha. I agree, the more native APIs we can leverage the better.

Thread Thread
robole profile image
Rob OLeary Author • Edited

I would base a decision for a particular implementation on browser support, rendering uniformity across browsers, performance, complexity of what you want to do, is it an important feature or just icing, accessibility, and general usability. Sometimes it makes more sense to use JS, and sometimes CSS only. For other types of animation, I would use transitions and @keyframes for simpler animations and certain kinds of effects, for more complex and timed animations I would JS. The nature of web dev is sometimes outcomes can be surprising, so you need to test across browsers to see what you're getting. It may be a requirement to support > 97% of browsers.

In this case, the amount of code is the same, it comes down what is more suitable for your use case. My example is consistent across browsers and has excellent browser support (SVG is native to browsers since around IE9). I am interested to test out the CSS to see how it is. You still need to create a path, which is works the same as SVG I assume? Doing this by hand is cumbersome, so you may still need to jump into an editor. The coordinate system for the path in CSS has a big question mark for me, "M20 20", what unit is 20? Is it responsive (scalable) like SVG?

Collapse
robole profile image
Rob OLeary Author

bugs