Lottie animation integration tool

Challenge

The Telegraph’s product team wanted to make news articles more engaging by introducing more animation. The issue was that the only options available at the time were heavy GIFs, which hurt page speed, or videos, which lacked visual quality when scaled up. Was there an alternative?

Solution

Having worked in the internet industry since the 2000s, I was familiar with an old solution to their problem, Adobe Flash. I have a soft spot for Flash, since it was an innovative tool for its time. However, for many good reasons, it’s no longer an option.

Recently, another option on the scene is Airbnb’s Lotti. Lottie is a vector-based format that allows designers to create animations in After-effects with small file sizes and without losing image quality.

The challenge was how to get Lotti animations out of After-effects and into the CMS.

I created a web-based tool that allowed designers to load Lottie JSON files, preview the animation at different breakpoints, and see it inline with an example article. Adding background colours or setting autoplay are other ways the tool could modify the animation.

The exported HTML block includes all the necessary JSON data and scripts, allowing it to be embedded directly into the CMS.

The designers were happy because the solution allowed them to continue using the authoring tools they already knew, while the site developers were happy because we had a solution that wouldn’t slow down pages with large GIFs.

Project skills