Axle's Journey: How to Create an Animated Timeline
According to the Nielsen Norman Group, most users leave a website within 10 to 20 seconds, so it’s crucial to build an engaging site that communicates your brand’s value proposition up front.
To keep users on our site, BigWheel developed a timeline as a visualization of how the company was formed. The design is minimal, vibrant, and allows the user to focus on each year as they horizontally scroll through our history. Including Axle, BigWheel’s mascot, injected some fun into the timeline while bringing it to life.
“We wanted to encourage users to scroll through the timeline, so we animated Axle to look like he’s riding along the line,” says BigWheel developer, Philip Kirkham.
The process required multiple steps and adjustments to ensure Axle realistically rode along the timeline.
Step 1: Get Axle Moving
To start, Kirkham boiled it down to the basics by simply moving Axle along the looped path.
- First, he created a Scalable Vector Graphic (SVG) path of the original illustration which established the path that Axle followed.
- From there, the exact coordinates of the path at any length were determined using SVGGeometryElement.getPointAtLength() and then applied to Axle.
Step 2: Rotate Axle
At this point, the animation got a bit more complicated. Although Axle traced the loops, he did not look like he was riding the line. So, Kirkham needed to rotate Axle along the curves. This called for the use of trigonometry (you know, the math you thought you weren’t going to use in the real world).
- Kirkham approximated the angle tangent to the curve by getting the coordinates at the current length, as well as the coordinates at (current length - 1). He then took the arctangent of the difference between the two points.
Step 3: Smooth It Out
Now Axle rotated along the path, but his wheels cut into the track on concave curves and floated above on convex curves. There were also some bumps along the way. To smooth out the animation, Kirkham needed to adjust the translation so that the current point on the track was underneath Axle's front wheel.
- Kirkham found the point on the track that's roughly below Axle's rear wheel and then calculated the arc tangent between these two points instead.
Step 4: Add Gravity
Axle was moving smoothly along the path but the animation still looked a bit flat. To give it more of a realistic look, physics and gravity were added to the equation so Axle sped up when he rode downhill and slowed down when he pedaled uphill.
- Kirkham approximated the effect on his speed, by using the sine of Axle’s current angle [sin(Θ) ✕ constant gravitational acceleration ✕ elapsed time].
- A minimum speed was then set so that Axle never rolled backward.
Step 5: Give Axle Life
For the final step, Kirkham replaced the static image of Axle with an animated gif.
For BigWheel, it was important to pay close attention to the details so that Axle didn’t just follow the line, but looked great while doing it.
“There is a lot of stuff out there where the animation just follows a line, but the details are important to us so we wanted to give Axle a bit more flair,” says Kirkham.