Vector Motion Graphics

Motion on the early web

Working with the web early on, I realised how difficult it was to show motion well: across browsers, across devices, streamed over whatever connection people had. Back in 2016 and 2017, before LottieFiles was a thing, the most reliable way to put motion graphics on a website was an MP4 video or a GIF.

Neither was a good fit. On slow connections they caused more frustration than awe, and adding motion graphics to a website was cumbersome.

Finding Bodymovin

My obsession with motion graphics led me to Bodymovin, an Adobe After Effects plugin developed by Hernan Torrisi. It exported animations into a lightweight JSON format, so the browser could draw them live instead of playing back baked frames.

From the pen tool to the browser

• 01 · Illustrator

  Draw

  Each illustration drawn by hand with the pen tool.

• 02 · After Effects

  Animate

  Imported into After Effects and brought to life with keyframes.

• 03 · Bodymovin

  Export

  Exported as animated SVG that stays sharp at any size.

At the time, a scalable motion graphic in under 10 KB was a dream come true. Fast forward to today, and I direct Claude to design Lottie animations for me.

The originals

These are a few of those OG motion graphics, drawn with the pen tool and animated in After Effects. Each one is a 12-second loop playing right here as an animated SVG: no video, no GIF.