Reducing Animation Size by 20,338% with Lottie — BigPay Freeze Card

Project Scope

As the app grew, it’s size grew along. Making load time and download time to increase. Developers were concerned about our initial animation for the “freeze card” experience so they asked us if the Design team could help.

Date 2021

Role Lead Product Designer

Contributions 1. Moodboard 2. Hi-fi design 3. After Effect 4. Lottie JS code

The Previous Animation

Frame sequence from the original After Effects freeze card animation — The first animation was created in After Effects and it was based on a tutorial from Voxyde VFX. It was very complex and involved many different effects and layers on top of each other. The style was really graphically appealing but implementation was not so straight forward. It consisted in exporting the animation as semitransparent PNGs frame by frame and then overlaying them over the original card image.

Semi-transparent PNG frames overlaid on the card image for the original animation

There were some problems with that approach. It would take some loading time for the animation to start, The app became heavy to download as all the images were in the build. For iOS, developers had to reduce the frame rate bellow 24fps making the animation far from smooth.

It was pretty but not great.

The Idea

To recreate the animation using Lottie files in order to reduce the app size, speed up loading times and make the animation butter smooth.

“A Lottie is a JSON-based animation file format that allows you to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation. LottieFiles lets you create, edit, test, collaborate on and ship a Lottie in the easiest way possible.”

Creating the new designs

Lottie is awesome and all but, is has some limitations. I could still use AE to animate and generate the code, but all those fancy effects used on the first animation are not available.

I could still use vectors, gradients and transparencies so I thought it would be great to redesign elements in a more cartoonish way in order to be able to replicate whatever design natively in AE so to export directly as JS code.

For this reason my moodboard was very “cartoonish”.

Cartoonish-style moodboard exploring visual direction for the new Lottie animation

With those ideas in mind I started sketching up some concepts and tried to understand what style would look better before starting to animate anything.

I designed those in Figma for speeds sake, knowing that I could replicate those vector designs in AE or simply using Figma to AE plugin to pull it into AE as vectors.

Design iterations exploring different styles for the frozen card illustration

Final design

Animation

The Final design consisted of 4 sets of transparent elements that should simply overlay on top of each other. Because the animation was happening so fast I didn’t need to individually animate each set.

Once I had those vectors in AE it was simply adjust the transparency of each set from zero to hundred and it was done.

Handover

Using the Lottie plugin for AE was easy to view the animation and export as JSON file. Developers simply added the file to iOS and android and voila! We now got a consistent animation across platforms that runs super smooth and loads instantly.

Lottie plugin panel in After Effects used to preview and export the animation as JSON

The best of all is that we went from 12MB of images to just 59KB of code. That’s a stunning 20338% improvement

File size comparison chart showing the drop from 12MB of PNG frames to 59KB of Lottie code