Axess Advisory

A lightweight SVG animation solution

Creative Goals

Axess requested a loading indicator for their in-house software — and needed something really lightweight and subtle.

I’m no stranger animating 2D translations, self-drawing line-paths and other timeline-based effects in After Effects for video production.

Where I am a novice to animation is on the web. Well not anymore. Enter Anime.js. This Javascript library changed the game. No more nightmares about writing CSS Keyframes. No doubt you’ll get buttery smooth animations with pure CSS, but for more complex timelines, Anime.js really shines.

This animation was completed for a client that found me via Upwork. The animation loops — a universal signal, things are loading. 

The total SVG and JS weighs in at 29 kB 😇

Leave a Reply