Lottie animations can enhance engagement and help guide site visitors to take action, driving your conversions up.

Below, we'll explore how Lottie animations can add magic to your website, key places to use them, and how you can easily plop them into popular no-code platforms like Webflow, Squarespace, WordPress, and Wix. Let’s get moving. 😏

What Are Lottie Animations?

Lotties are SVG animations made to use on web & apps. They are created by animation nerds in After Effects and exported as JSON files (aka code-based animations).

Unlike GIFs, Lottie animations are vector, making them scale-able and crisp at any size. And because they're JSONs, their file sizes are small, keeping your site fast and responsive.

Where to use them on your website

Lottie animations can be used in a bunch of places on your website to add some delightful moments to the user experience.

Hero Section

Make a killer first impression on page load by adding a bit of animation to your hero section. A subtle supporting illustration or ambient background can impress visitors without distracting from your message.

Loading Screens

Instead of a static loading screen, use a playful Lottie animation to entertain users. A little movement can keep users engaged through the load.

Frame images

Guide your customer’s eyes to a product photo or course mockup by framing it with Lotties.

Scroll Animations

Try triggering Lottie illustrations as they scroll into view. This makes the website feel more interactive as elements respond to user behavior.

Call-to-Action Animations

Draw attention to your CTAs by playing Lotties when a user hovers or clicks a button. A playful animation (like a simple arrow pointing) can help guide visitors to take action, increasing your conversion rates.

Add Lotties to your website

Now that you know how to use Lottie animations strategically on your website, let’s see just how easy it is to add them to popular no-code website builders (for more, check out the full list here).

Webflow

Webflow has a native integration with Lottie files, making it super easy to add them to your site.

• Step 1: In the Webflow Designer, drag a "Lottie" element from the Add Panel (under the "Embed" section).
• Step 2: Upload your Lottie JSON file to the Lottie element.
• Step 3: Customize the Lottie animation’s settings, such as the playback speed, loop, or autoplay options.

Squarespace

You can add them to Squarespace using the Code Block:

• Step 1: Upload your Lottie file to a hosting platform (i.e. your Squarespace site).
• Step 2: Copy the Lottie URL from Squarespace and add it to the Lottie embed code by replacing the <URL HERE> in the code.
• Step 3: Use a Code Block to paste the embed code, and save your changes.

WordPress

WordPress users can add Lottie animations with a plugin .

• Step 1: Install the Lottie Animations plugin from the WordPress Plugin Library.
• Step 2: Once activated, add a Lottie block.
• Step 3: Upload your Lottie JSON file and customize its settings.

Wix

You can add them to Wix using an Embed widget.

• Step 1: Upload your Lottie file to a hosting platform (i.e. your Wix site).
• Step 2: Click on the "+" button on the left toolbar, then select Embed > Embed a Widget.
• Step 3: Choose the HTML iframe option.
• Step 4: Paste the Lottie embed code into the iframe code box. Make sure to replace <URL HERE> with the Lottie URL you uploaded in Step 1.

Final Thoughts

By adding Lottie animations to your website, you engage visitors, boost user experience, and stand out from the competition. So have some fun and experiment with Lotties!

Our Lottie Sets

We offer sets of animated Lottie JSON files designed in a uniform aesthetic. To get you started, every product page includes a set of Free Lottie Animations. 🎉