SVG <animateMotion>
provides a way to define how an element moves along a motion path. In
this article, Paul Scanlon shares an idea of how to use it by animating
race cars in an infinite loop as easy as one-two-three!
Hello! And if you like HTML, you’ve come to the right place!
I love HTML. As an old-school front-end developer, I think it’s a hugely underrated skill. I’ve been writing HTML since ~2005, and today the browser alone can almost do all the things Flash could do nearly two decades ago!
One such trick HTML now has is called <animateMotion>
— those familiar with Flash will remember this as The Motion Guide. I found this video from 14 years ago, but the method existed for a while before that:
The idea is, you create a path for elements to follow… and that’s it!
Here’s an example of what you can do with <animateMotion>
:
If you take a look at the MDN Docs, you’ll see a simple example of a red circle following a path on an infinite loop. The race cars in the live preview follow the same simple rules, and it works just like this!
SVG Using animateMotion
#
Here’s a simplified version which I’ll use to explain some of the finer details.
Note: I’ve removed some of the path values for brevity, but you can see src
for the below snippet at simple-version.html.)
The first thing to look at is the <g>
element with the id
of track-lines
. This is the yellow dashed line that represents the path the car will follow.
You’ll also see another <g>
element with the id
of pink-car
. Within this group is the <animateMotion>
element. It has an attribute of path
. The numbers used to form this path are the same as the numbers that form the track-lines
. An <animateMotion>
element is invisible, and its only purpose is to provide a path for an element to follow.
Speaking of which, below the <animateMotion>
element is another <path>
element, this is the pink car, and it will follow the path of its nearest neighbor.
animateMotion
Attributes #
There’s some additional attributes that the <animateMotion>
element accepts; these are as follows:
dur
: The duration of the animation.repeatCount
: The number of times the animation should loop.rotate
: This can be considered as an orientation to the path. It will ensure the element that’s animating around the path always faces the direction of travel.path
: As explained, this is the actual path an element will follow.
The MDN Docs show the <animateMotion>
element as a child of an Svg <circle>
shape e.g:
Whilst
this approach works for shapes, it will only work if the element can
accept a child. The SVG path element can’t, so wrapping everything in
the <g>
element allows HTML to work out where the coordinate system should start and which elements should follow the path. Sneaky ay!
And that’s it. I designed the track and the other elements seen on the preview link
in Adobe Illustrator and exported the whole thing as an SVG. I then did
a little bit of manual refactoring to ensure the cars were adjacent to
an <animateMotion>
element. Et voilà! A race track!
Accessibility #
One small snag, the <animateMotion>
element doesn’t natively observe prefers-reduce-motion. To work around this in the preview I’ve added a media query that sets any element with the class name of car
to display: none;
. Not ideal, but it is at least motion safe!
No comments:
Post a Comment