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.
Rob OLeary
Posted on • Edited on • Originally published at roboleary.net
Animate text along a path (it's easy)
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (10)
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...
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.
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.
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.
Web Animations API === dynamic
Right, but now you've stepped into the browser API & javascript which contradicts your above comment, unless I've misunderstood your point.
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.
Gotcha. I agree, the more native APIs we can leverage the better.
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?