Have you ever tried to force a square peg into a round hole?
Your answer’s probably a no. That would be a waste of time (and a questionable form of entertainment). But that’s often what adding animation to different platforms can feel like. Each platform – such as the web, mobile apps or your favorite design tool – has its own method of implementing animation. And it’s not always easy to bring an animation created for one platform (e.g. an inline SVG animation on your website) into another (e.g. an Instagram post).
That’s why we wanted to make sharing animations as easy as possible. With LottieFiles, you can take any free animation in our library – or animations that you or your team have created – and ship them anywhere. To help you out, we’ve put together seven ways you can add Lottie animations to almost any platform.
1. Embed Lottie animations without code
The easiest way to add a Lottie animation is through the embed feature. Lottie animations can be embedded on any sites that support the oEmbed format. This includes over 25,000 platforms – such as Notion, Medium, Ghost, Reddit and WordPress.
Here’s how to embed any animation in a few steps:
- Visit any animation page.
- Scroll down and copy the oEmbed URL.
- Paste the embed link in a supported platform.
2. Add Lottie animations in HTML
You can also add Lottie animations to web pages with HTML. This can be useful if the platform you’re using doesn’t support embedding, or if you need more control over how your Lottie animation will play.
Here’s how to add Lottie animation in HTML:
- Visit any animation page.
- Copy the Lottie Animation URL. If your Lottie JSON file is hosted elsewhere, you can use the link too.
- Visit the Lottie Web Player page.
- Paste your Lottie Animation URL in the Your Lottie JSON URL section.
- You can customize its play mode, direction, background color, size, speed and more.
- Copy the generated code.
- Paste the code in your HTML.
And that’s it! Your animation should appear on your site.
3. Add Lottie animations to JavaScript libraries and frameworks
You can also install the Lottie Web Player using the node package manager (npm) or yarn, then implement it in HTML, or in JavaScript libraries and frameworks.
For example, here’s how to use Lottie animations in a React app.
Install the package with npm or yarn.
npm install --save @lottiefiles/lottie-playerThen import the player.
import * as LottiePlayer from "@lottiefiles/lottie-player";Include the following code.
<lottie-player
autoplay
controls
loop
mode="normal"
src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
style="width: 320px"
></lottie-player>For more information and example code, read this guide to implementing the lottie-player Web Component in React, Vue, Nuxt and Next.js. You can also use the Lottie Interactivity library to set up advanced interactions – such as syncing an animation to page scrolling, playing specific segments on hover, toggling animations on click and more.
4. Add Lottie animations to iOS and Android apps
Build more engaging mobile apps with Lottie animations. For instance, you can use Lottie as loading animations, onboarding animations, interactive buttons and more. To get started, check out these guides for adding Lottie to iOS and Android:
- How to add Lottie Animations in iOS apps (Swift)
- Getting Started with Lottie Animations in an Android App
If you’re working with mobile platforms, you could also get the LottieFiles Mobile App. This app helps you create, test and preview animations on mobile, saving you precious development hours.
5. Add Lottie animations to Figma and Adobe XD
You can also add Lottie animations to popular design tools. To get started, install the LottieFiles plugins available for Figma or Adobe XD. Once you’ve installed them, just run the plugins:
- Figma - Right-click the canvas > Plugins > LottieFiles
- Adobe XD - In the home screen, click Add-ons > Plugins > LottieFiles for XD
With these plugins, you can quickly search for free Lottie animations, right within Figma or Adobe XD. Then insert any animation with just a few clicks. This means no switching apps or browser tabs to find what you need – which, as we know, can lead to distraction.
Besides that, these plugins give you quick access to your private or team animations. You could take animations that you or your team have created in Adobe After Effects, and insert them immediately in Figma or Adobe XD.
6. Add Lottie animations to Webflow and WordPress
Building websites with no-code builders like Webflow and WordPress? Adding animation is as easy as drag and drop. Better yet, you can customize the way these animations play, and set them to react to user behavior.
So how do you get started?
With Webflow, just download any Lottie animation from LottieFiles. Then drag and drop the file anywhere into the Webflow editor.
If you click on the Lottie animation, the Lottie Animation Settings will appear in the right-hand panel. You can use these settings to change the animation size, playback behavior and more. You can even set up interaction triggers, such as playing the animation only on click or hover. For more information, check out Webflow’s guide to embedding Lottie animations.
To add Lottie animations to WordPress, download the LottieFiles for WordPress plugin. Open the WordPress Gutenberg editor, then add a new Lottie block. You can insert the Lottie animation by browsing the LottieFiles animation library, uploading from your Media Library or inserting from a URL.
There are a ton of options to customize these animations. Change background colors, sizes, playback behavior and more. You can also set up advanced interactions, such as scroll-based animations. Check out this guide to setting up Lottie animations in WordPress for more ideas.
7. For everything else – export as GIF or MP4
Okay, what if you’ve gotten to the end of this list…and haven’t found anything compatible with your platform or tool? No worries. If you come across a platform that doesn’t support Lottie (yet), you can export Lottie animations as GIFs or MP4 videos.
Here’s how it works.
- Visit any animation page.
- Click Download.
- Choose GIF or MP4.
Use this GIF or MP4 anywhere that supports these file types. This opens up a whole new world of possibilities. For example, you could:
- Create animated designs with Canva
- Add animation to social media platforms like Instagram or Facebook
- Add animation to email marketing
- Create more engaging presentation slides
Make your mockups smarter with dotLottie
Using Lottie animations in design mockups is already a great way to bring concepts to life, but dotLottie takes it further. dotLottie is an evolution of the Lottie format created to address some limitations of the original Lottie format. This file format gives developers a more efficient way to implement animations as it uses ZIP tech for compression, which reduces your file size up to 80% more than a standard Lottie. It's essentially a subset of Lottie that can include multiple Lottie animations, images, and other assets all packaged in a single file and still uses the .lottie extension.
Additionally, with theming capabilities and smaller file sizes, dotLottie ensures smooth previews and fast performance. Developers and designers will benefit from the simplicity and efficiency that dotLottie brings to managing dynamic mockups.
Go build something amazing
There you have it – seven ways to add animation almost anywhere. And don’t forget that you can easily customize any Lottie animation to fit your brand or design. So go ahead – explore the LottieFiles animation library, pick out something you like and use it on your favorite platforms. We can’t wait to see what you build with Lottie.
