Enjoyable with CSS Movement Path

Animating a component alongside a path is one thing we as builders would usually attain for an enormous previous JS library (like GSAP) for. However with the brand new CSS Movement Path module, we are able to create fancy path animations utilizing solely CSS!

I’ve created a few enjoyable little animations that mess around with these properties – we’ll stroll by way of a number of the strategies concerned on this article.

See the Pen CSS Movement Path with SVG (Chrome solely) by Michelle Barker
(@michellebarker) on CodePen.

See the Pen CSS Movement Path spirograph by Michelle Barker
(@michellebarker) on CodePen.

Easy path animation

To create a path animation we have to use offset-path with a price of the trail we wish to animate alongside (the syntax is like an SVG path), and animate the offset-distance property:

.obj {
  offset-path: path('M.4 84.1s127.4 188 267.7 0 247.3 0 247.3 0');
  animation: transfer 2000ms;
}

@keyframes transfer {
  100% {
    offset-distance: 100%;
  }
}

Right here’s a easy instance:

See the Pen Easy offset-path animation by Michelle Barker
(@michellebarker) on CodePen.

We will additionally change the rotational behaviour and place of the animated object utilizing offset-rotate and offset-position respectively, which might enable for some cool results. On this demo you possibly can see the impact of offset-rotate when in comparison with the default: the second object doesn’t rotate relative to the trail, however stays mounted.

See the Pen Offset-path with offset-rotate by Michelle Barker
(@michellebarker) on CodePen.

Movement path with SVG

I used to be additionally all in favour of having the ability to present the precise path the weather are shifting alongside. Within the demos above I’m doing this by together with an SVG with the identical path co-ordinates within the HTML and utilizing absolute positioning. The spec permits for a URL to be handed to the path() perform (just like clip-path), which might imply we might merely embrace the SVG path ID, and keep away from duplicating the trail in CSS. (Our CSS file turns into very messy once we embrace an advanced path with many coordinates!) However that doesn’t seem like supported anyplace but, so we’ll should make do with utilizing path coordinates.

This additionally means we’ve much less management over making the animation responsive, as we are able to’t scale our SVG and have the trail match. If we attempt to change the SVG width then the trail stays at its authentic measurement. (I’m pretty positive that is the case, as I can’t get it to behave some other means – in case you have an answer, please let me know!)

“Drawing” the trail

Not solely can we transfer a component alongside the trail, we are able to make it appear to be it’s drawing the trail too. We will already “draw” SVG paths utilizing the stroke-dashoffset and stroke-dasharray properties in CSS – the trick is setting the stroke-dasharray worth to the size of the trail, then animating from that offset worth to 0:

.path {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: draw 1000ms;
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

(This text from CSS Tips breaks it down in finer element.)

If we use the “drawing” animation with the identical period and timing perform (easing) because the offset-path animation, then these will occur concurrently, and the trail will seem as if it’s being drawn by the animated aspect.

Within the second of the 2 demos firstly of this text, the animation shifting the item alongside the trail loops by way of twice for each cycle of the stroke animation. Utilizing stroke-dashoffset the road is drawn in after which out once more (going from a constructive to a adverse offset worth), so it seems to be drawn after which subsequently erased:

.path {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: draw 1000ms;
}

@keyframes draw {
  0% {
    stroke-dashoffset: 520;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -520;
  }
}

Smoother animation with box-shadow

There’s yet another little trick to those animations: When constructing the primary instance, I observed that because it was fairly quick, the animation appeared jumpy at some factors. To make the animation really feel extra pure I added a field shadow whereas the item was shifting – this creates a sort of movement blur impact, and feels a lot smoother:

@keyframes transfer {
  10% {
    opacity: 1;
    offset-distance: 0%;
  }
  30% {
    box-shadow: -0.5rem 0 0.3rem salmon;
  }
  70% {
    box-shadow: -0.5rem 0 0.3rem salmon;
  }
  90% {
    opacity: 1;
    offset-distance: 100%;
    box-shadow: none;
  }
  100% {
    opacity: 0;
    offset-distance: 100%;
  }
}

Browser help

On the time of writing, offset-path is simply supported in Chrome – though it may be enabled in Firefox with the structure.css.motion-path.enabled flag, and is ready to be supported as normal within the subsequent Firefox launch.

Assets

Dan Wilson has created helpful choice of Codepen demos that exhibit the totally different properties of Movement Path. He’s additionally simply revealed an article on it. (Thanks Adam Kuhn for pointing me in his route!)