Article Title

Author Name

{CATEGORY}

{date}

{#hash1}

{#hash2}

Illustrations by {name}

{excerpt} A sprint is when a company or team dedicates a certain amount of time (around 2-4 weeks) to work on a specific project at full speed.

{0} Min read

Profile picture of Kiera Magnetti

4 min read

4 ways to take your next website from blah to bold with Lottie animations

You think you can stand out online without the smart use of animations? In this attention economy?

An illustration of a Lottie animation featuring rounded, gradient bars being placed within a website.

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Before Times Square became a forest of digital jumbotrons, tobacco brand Camel once installed a billboard featuring a man blowing smoke rings every 4 seconds. Years later, Nissin Foods displayed a 60-foot steaming cup of instant noodles.


Creating a website that will attract and engage users is a bit like trying to stand out in Times Square. But one effective way to capture human attention—that Camel and Nissin used to spectacular effect—is with motion. When they’re used well, web animations (or Lottie animations) are an effective way to both stand out and create seamless user experiences on the web. And they're now fully compatible with Editor X.


Thanks to our new Lottie animations widget, you can add lightweight, vector-based animations to your next website right from the "add" panel. And like any other aspect of a fully responsive website, these animations maintain their quality across web and mobile. (See more detail on how to use the Editor X lottie animations widget here.) Now let's get into what they are, and how you can use them effectively.



What are Lottie animations?


A Lottie animation is a JSON-based file format that can be rendered natively on just about any device or platform. Lottie files are small (up to 600x smaller than GIFs), and they’re vector-based so they scale to any size without losing quality.


Lottie animations are an industry standard for adding animated graphics to websites and interfaces to make them “more vivid and interactive,” says Editor X product manager Idan Bar Dayan. You can import them on any Editor X site with a LottieFiles account and the URL of the animation you’re using.


To help you get started using Lottie animations on your next site, we found some of our favorite uses for them in site design.


Get a full explainer on how to add Lottie Animations to your Editor X website with this video by Academy X.



1. Emphasize an idea or tell a story


On average, users stay on a web page for less than a minute, and if they need to skim through a dense wall of text they may not fully comprehend the message you’re trying to get across. Adding a bit of motion with Lottie is a digestible and engaging way to tell a story or explain a product.


This site for software development marketplace WeProfit uses simple animations throughout to visually explain their offering, benefits and process. When creating a site that includes a complex product or brand story, consider how a few animations, rather than a few paragraphs, might effectively convey ideas quickly and intuitively.

Add a bit of motion with Lottie to tell a story, encourage an action, or explain a product in a digestible way. Image by Agung Setya Nugraha via LottieFiles.



2. Increase engagement with moments of delight