Adding animation or motion design elements has plenty of benefits: they help tell your brand story, create effective user interfaces (UIs), engage users, drive conversions and more. Plus, they’re just plain fun!

But conventionally, adding animation to websites or mobile applications hasn’t always been easy. You’d need to know how to design or code, or hire someone who can.

That’s why we’re excited to show off the LottieFiles embed feature, which makes adding animation as easy as copying and pasting a static image. Here’s how it works.

But first, why Lottie animations?

"Heart" by Jasmine

Not familiar with Lottie? A Lottie animation is a lightweight file format (around 600% smaller than GIFs) that enables rich and smooth animation, and is easy to implement anywhere. Some of the world’s most popular websites and mobile apps are built with Lottie.

And the Lottie format benefits everyone – for developers and designers, it means that creating, editing and shipping animations to the web or mobile is much easier.

For content creators or marketers, this means that you can add animations almost anywhere, even if you don’t know how to code or design. And even better, you can use the Lottie Editor or Color Palette feature to customize these animations to fit your brand.

Free animations on LottieFiles
Free animations on LottieFiles

Here’s the kicker – you can get thousands of animations on the LottieFiles platform. These Lottie animations have been graciously contributed by the Lottie community, and are free for you to use in personal and commercial projects.

Here’s how the LottieFiles embed feature works

With LottieFiles, you can embed any public Lottie animation in our library into your favorite platforms. It’s as easy as copy and paste.

LottieFiles’ embed feature uses a format called oEmbed – this is a popular, open format that lets you embed rich content on external websites. Some of the daily tools you use support open-source tools like Embed.ly and Iframely, which allows you to embed LottieFiles animations. Find out about all these sites that support oEmbed here:

In other words, this means that Lottie animations are accessible across 25,000+ everyday tools and platforms like Notion, Medium, Ghost, Reddit, WordPress and many others.

For instance, you can use the oEmbed feature to:

  • Make your Notion documents aesthetically appealing
  • Add visual content to your blog posts on Medium, Ghost or WordPress
  • Add landing page animations on website builders like WordPress
  • Share your animated creations on social platforms like Reddit

How to embed a Lottie animation without code

Here’s how easy it is to embed a Lottie animation. Let’s try it out in Notion.

  1. Explore free animations on LottieFiles.com.
  2. Click on any animation.
  3. Save the animation to your LottieFiles Workspace to enable the asset link.
  4. Click on the Handoff & Embed button to get the oEmbed URL (read more about this here).
oEmbed URL
  1. Head to Notion and insert an ‘embed’ block. Paste in the link you’ve copied and click ‘Embed link’.

And voila! Your animation should appear.

Lottie animation in Notion
Lottie animation in Notion; animation by Ignite Animation

Other ways to add Lottie animations

The embed feature is the easiest way to get motion anywhere, but if you need more flexibility (such as setting up animations to react to user interactions), there are tons of other ways. Here’s how you can add Lottie animations anywhere:

  • With HTML - Automatically generate HTML code for any Lottie animation, then paste it anywhere that supports HTML.
  • With JavaScript libraries and frameworks - Need to implement Lottie in React, Vue or other libraries and frameworks? The lottie-player web component makes it easy to do so.
  • With iOS and Android libraries - Some of the world’s top mobile apps are built with Lottie. Think loading animations, micro-interactions and more. Check out these guides to using Lottie animations in Android and in iOS apps to get started.
  • On design platforms - You can easily add Lottie to your designs, mockups and prototypes with LottieFiles’ integrations with design tools like Figma and Adobe XD.
  • On website builders - Besides using the embed feature, LottieFiles also has integrations with no-code website builders like Webflow and WordPress. These integrations let you customize how these animations play or react to user behavior.
  • As GIFs or MP4s - Found a platform that doesn’t support Lottie animations (yet)? You can download Lottie animations as GIFs or MP4s, and upload them anywhere that supports these file types, such as Instagram or Facebook.

We hope this makes it easier for you to add animation on any platform – and don’t forget to share your awesome creations with us (psst, we’re on Twitter!).

This article was first published on 9/9/2022 and has been updated on 7/11/2024.