Positioning Text Along a Path with CSS

src.: css-irl.info

author: © Michelle Barker @MicheBarks 2020

I’ve been playing around with CSS Motion Path a lot over the past couple of months, and having a lot of fun creating demos, some of which you can find in this Codepen collection. But the “Motion Path” name is a little misleading, as it doesn’t only relate to movement. In fact, although the specification still goes by the name “Motion Path”, the property used to define the path was changed from motion-path to `offset-path. It’s easy to see why: an element can be placed anywhere along the path, with or without motion – its position (or offset-distance value) doesn’t have to be animated.

In the following demo (a version of a @beesandbombs GIF), the circles’ scale and opacity is animated, but their position is in fact stationary, despite the illusion of movement. However, they’re each positioned along a circular path using offset-path and offset-distance.

See the Pen
Offset-path animated circles with Houdini and Splitting JS
by Michelle Barker (@michellebarker)
on CodePen.