Move over GIF: Lottie and Other Animation Formats are Taking Charge

• Animation in Design
• Design Practices
• Lottie

Lottie and Why You’ll Want to Know About This Now

Several years ago, I just got started with investing and began exploring various online trading platforms. I tried out TD Ameritrade (prior to its acquisition by Charles Schwab), eTrade, and the then-newcomer, Robinhood. Of all the options I tested, Robinhood stood out for its clean and approachable interface that felt smooth and intuitive to use. At the time, I didn’t realize it, but one of the reasons I was drawn to Robinhood was its clever use of simple animations in its marketing campaigns.

Fast forward to today, and Robinhood’s commitment to user-friendliness remains a defining feature of its brand. The company’s promotions continue to feature slick and clean animations that make their message more memorable, even if they’re not directly related to the content. Despite facing multiple controversies over the years, Robinhood’s design and usability still make it an attractive option for new investors.

Balancing Act: Graphics vs Size

Rich motion graphics have become a critical tool for engaging users on websites and apps. Not only do they enhance the overall experience, but they also improve time on site and aid in remembering the brand’s message, while giving a hefty bump to SEO performance.

On the flip side, marketers face a major challenge when it comes to embedding these graphics into their web pages: page load time. The more images and videos embedded on a page, the slower it can load, which can negatively impact SEO.

Until recently, the options for embedding graphics on websites were limited to simple JavaScript coding or creating GIFs for more complex animations. However, using GIFs comes with color limitations, and using MP4 videos significantly increases the site’s size budget.

Lottie Fills the Gap

Enter Lottie. It’s an animation format that was developed by AirBnB (of all companies) with a storied history, eventually emerging in 2015. Being output as vector images in a simple .json format, it has major benefits over GIF and other rasterized or video formats:

Scalability

Like the difference of SVGs and PNGs, Lottie files can be scaled up or down without losing quality, whereas GIFs become pixelated when resized.[

Smaller File Size

Lottie files are typically smaller in size compared to GIFs, which can help improve website or app loading times.

Interactivity

Lottie files can be interactive, meaning users can click, hover, or tap on them to trigger an action or animation.

Because of all its perks, Lottie files are taking over the web. The format is being used by over 250,000 companies, and it’s integrated with some of the most popular codeless web publishing platforms, such as WordPress and Webflow. Platforms without native support can integrate the Lottie renderer by downloading the latest libraries directly from GitHub.

Other Animation Options

Lottie isn’t the only file format in town either. While Lottie is open source and easy to implement, it is best used for simpler animations that bring life to websites and apps. Editing tools for Lottie, like Phase, tend to be very easy to pick up. But there are more complex tools hitting the market for people who need more robust feature sets.

For animators with more of a gaming bent, Rive is a proprietary design tool that builds animations that have a lot of the same perks as Lotties. Because of the closed nature of its format, it isn’t as customizable and isn’t integrated in many platforms, but it is capable of some amazing designs and interactions if you tread on its steeper learning curve.

If you’re really looking to dive into complex animations, in-browser 3D art can be made using Three.js, based on the WebGL library. One of the recent editors founded on that technology is Spline, which has a versatile in-browser design app. While it is very easy to use in comparison to other 3D software, animation in Spline is definitely a step above the others here, so expect to spend some time getting used to the 3D space.

As more designers and animators adopt these tools, we can expect to see a new age of web and app design emerge. We are excited to see what new tech is on the horizon and how it will continue to revolutionize the digital design world.

. . .

• Subscribe to our Magazine Newsletter. 
• Follow us on Facebook and LinkedIn.
• Join our community on Slack and Facebook.