I’ve been taking part in round with CSS Movement Path loads over the previous couple of months, and having numerous enjoyable creating demos, a few of which you’ll find in this Codepen assortment. However the “Movement Path” title is somewhat deceptive, because it doesn’t solely relate to motion. In reality, though the specification nonetheless goes by the title “Movement Path”, the property used to outline the trail was modified from motion-path to offset-path. It’s straightforward to see why: a component could be positioned anyplace alongside the trail, with or with out movement – its place (or offset-distance worth) doesn’t need to be animated.
Within the following demo (a model of a @beesandbombs GIF), the circles’ scale and opacity is animated, however their place is in actual fact stationary, regardless of the phantasm of motion. Nonetheless, they’re every positioned alongside a round path utilizing offset-path and offset-distance.
See the Pen Offset-path animated circles with Houdini and Splitting JS by Michelle Barker
(@michellebarker) on CodePen.
(There’s additionally a conic-gradient masks, animated with CSS Houdini – you’ll have to view it in Chrome to see the impact.)
This potential to place stationary components alongside a path lends itself properly to textual content. I created some demos final yr the place I used CSS customized properties to place textual content round a circle, utilizing transforms. This instance makes use of Splitting.js (my favorite JS library!) to set the customized properties. (Extra on this later.)
See the Pen Textual content in a circle with CSS variables + Splitting.js and fluid sort by Michelle Barker
(@michellebarker) on CodePen.
It really works nice with dynamic content material – you’ll be able to change the textual content and the place of every character might be re-calculated so the textual content matches the circumference completely. However there’s a draw back: the textual content isn’t selectable, as a result of it makes use of absolute positioning and transforms.
Movement Path to the rescue
If we as a substitute use offset-path, calculating the offset-distance worth for every character utilizing customized properties, we will obtain the identical impact, with totally selectable textual content! Good!
See the Pen Textual content in a circle with offset-path by Michelle Barker
(@michellebarker) on CodePen.
Sadly, on the time of writing, the one supported offset-path worth is a path() operate. This doesn’t make it straightforward to construct responsively, as the trail doesn’t scale. However there are alternatives, resembling utilizing media queries to specify completely different path values for various breakpoints. Alternatively we might use transforms to scale the entire thing down on smaller screens. However none of those choices is right. If we might use an SVG path URL (because the specification states), then this might enable far more fine-grained management.
A phrase on path creation
My most popular method to decide the offset-path worth is to attract the trail in Illustrator and reserve it as an SVG, earlier than cleansing it up with an optimisation software and copying the ensuing path’s d attribute worth. In the event you merely draw a circle, Illustrator saves this as a <circle> factor fairly than a path. One method to forestall that is by first drawing the circle, then utilizing the scissor software in Illustrator to chop the circle’s path on the desired location. It would then be saved as a <path> fairly than a <circle> factor.
After all, we’re not restricted to circles. We will use any path we select.
Sure, we will animate textual content too
Animation is the place these strategies actually shine. We will animate the offset-distance to maneuver the string of textual content alongside the trail. One in every of my favorite strategies is to make use of animation-delay with values calculated from customized properties. Splitting.js assigns every character a customized property similar to its index. Passing that right into a calc operate ends in a extra natural movement, much like the consequences of easing. You’ll be able to see the distinction within the two animations under. The second animation implements an animation-delay on every character, calculated utilizing customized properties:
.char {
--delay: calc(var(--char-index) * 30ms);
} See the Pen Evaluating offset-path animation with/at once by Michelle Barker
(@michellebarker) on CodePen.
There’s numerous enjoyable available with this. The next demo makes use of the strategies described right here to create a rollercoaster impact:
See the Pen Typo-coaster by Michelle Barker
(@michellebarker) on CodePen.
We will get even weirder and add some 3D transforms to our animation:
See the Pen Splitting and movement path by Michelle Barker
(@michellebarker) on CodePen.
I hope you take pleasure in taking part in with Movement Path as a lot as I’ve!
