SpyFly: Web App Feature Animation

Scalable Commerce / SpyFly / 2021–2022

Property records, tapped open.

My role: Illustration-to-motion, character rigging and Lottie animation

Delivered: A 2000×1500 Lottie scene (24 fps, about 24 seconds) with an HTML demo, followed by two revisions in February and March 2022

Tools: After Effects, Lottie (Bodymovin export)

The brief

Scalable Commerce launches and runs web companies that help people make sense of messy information, and SpyFly is one of its web applications. The team wanted an animator to bring flat text and imagery to life for product-feature content on the website. Minimal file size, so the page would load fast, was a hard requirement.

The build

The scene puts a rigged character with a tablet next to a map card. Taps open a property's history one record at a time: sales in 2013, 2015 and 2021, mortgages in 2014 and 2019, and the deed, with the SpyFly magnifying-lens logo animating in. I tested the character rig as Lottie exports in January before using it in the scene.

The constraint

To keep the file light, I baked the rig to keyframes in an optimized precomp, used compressed PNGs for the map and street, and ran the scene at 24 fps. The first full scene test exported at 1.4 MB; the February version is about 600 KB, and the March revision, which swaps the character for an animated text box, is 377 KB.

The delivered experience

The February 2, 2022 version is the one shown here; it is the file used on the earlier mograph.life portfolio.