Putting Gears In Motion: Animating Cars With HTML And SVG
Original Source: https://smashingmagazine.com/2023/02/putting-gears-motion-animating-cars-with-html-svg/
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>:
🚀 Live Preview
⚙️ Repository
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!
A simple example of what can be achieved using animateMotion. (See animation)
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.)
<!DOCTYPE html>
<html>
<head>
<title>Simple Example</title>
</head>
<body>
<main>
<svg viewBox=”0 0 307 184″ xmlns=”http://www.w3.org/2000/svg”>
<g id=”track”>
<g id=”track-lines”>
<path fill=”none” stroke=”#facc15″ d=”M167.88,111.3…” />
</g>
<g id=”pink-car”>
<animateMotion dur=”4s” repeatCount=”indefinite” rotate=”auto” path=”M167.88,111.3…” />
<path fill=”#EC4899″ d=”M13.71,18.65c0.25-0.5…” />
</g>
</g>
</svg>
</main>
</body>
</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:
<circle r=”5″ fill=”red”>
<animateMotion
dur=”10s”
repeatCount=”indefinite”
path=”M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z” />
</circle>
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!
I hope you’ve enjoyed this post, and if you have any questions, please come and find me on Twitter. @PaulieScanlon, oh and if you’re a better illustrator than I am, please, feel free to re-design the race track and cars, and I’ll be happy to convert it into code!
See you around the internet!
Further Reading On SmashingMag
“How To Build A Real-Time Multi-User Game From Scratch,” Martin Grubinger
“Easy SVG Customization And Animation: A Practical Guide,” Adrian Bece
“Composable CSS Animation In Vue With AnimXYZ,” Ejiro Asiuwhu
“A Guide To Keyboard Accessibility: HTML And CSS (Part 1),” Cristian Díaz
Leave a Reply
Want to join the discussion?Feel free to contribute!