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 Wix Studio.

Thanks to our new Lottie animations widget, you can add lightweight, vector-based animations to your next website right from the "add" panel. (More advanced designers might try their hand at creative coding.) And like any other aspect of a fully responsive website, these animations maintain their quality across web and mobile. 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 Wix product manager Idan Bar Dayan. You can import them into any Wix Studio 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.

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

How often do you scroll a web page from top to bottom? Even with well-designed visuals and strong copy, users often still lose interest. Incorporating surprising touches of animation throughout a site can entice visitors to stay and scroll their way through it.

On this site from ice cream seller Mr Pops, there are small touches of animation—like shivering outlines over images and passing clouds—that keep you on the page just to see what’s next. Subtle static or interactive animations like these are especially great for pages that contain a lot of sections and information to scroll through, by adding pops of visual interest that draws the eye to key information readers need to know, and wows users into staying and navigating through the copy’s entirety.

Sprinkle in some strategic moments of delight to draw the eye across the page. Image by Ana Armendariz via LottieFiles.

3. Add flair to function

Adding your own custom animation to loading screens adds another opportunity for contextual branding, keeps users engaged, and can prevent them from leaving a site. Even if the load time isn’t shorter than it might be with a generic spinning wheel, the load time feels shorter, pivots a moment of downtime into an opportunity to delight, and creates a smoother overall experience when there’s a mesmerizing animation to look at. (Google Home’s block shapes, which bounce and change positions while the app loads, are one example).

From loading screens, to 404 pages, and other instances where users might lose patience, you can add animations to alleviate their frustrations and create a seamless experience.

Change a moment of friction, like load time, to one of delight and brand connection with a custom Lottie. Image by Ashwin Ganvir via LottieFiles.

4. Use micro-animations for visual feedback

Micro-animations are tiny bits of interactive movement that help guide users through a site. Done well, users hardly notice them, but they make the experience more intuitive—like a heart that responds when we tap to “like" something, or a submit button that transforms into a check mark so we know a form has gone through. (Related: How to make your web design portfolio stand out)

Using Lottie animations to add small instances of real-time feedback helps users see the results of actions they take on the page. When you pay attention to these moments that guide the user, and add animation, you can bring a website to life.

A bursting heart Lottie animation gives users an instant mood boost. Twitter sometimes uses an animation like this to encourage users to "heart" tweets related to particular hashtags. Image by Harish Vitta via LottieFiles.