Adding Lottie Animations to Your Site#

What are Lottie Animations?#

Lottie is a library by Airbnb that renders After Effects animations in real-time. They’re vector-based, so they scale perfectly and are much smaller than GIF or video files.

Why This Post Uses MDX#

You might notice this file is .mdx instead of .md - here’s why:

What is MDX? MDX is Markdown + JSX (or in our case, Astro components). It lets you import and use interactive components directly inside your markdown content.

Regular Markdown (.md):

1
# Just text and formatting
2
No components allowed here!

MDX (.mdx):

1
import MyComponent from './MyComponent.astro';
2

3
# Text with interactive components!
4
<MyComponent prop="value" />

How it renders in Astro:

1. Astro reads the .mdx file at build time
2. Processes the frontmatter (metadata at the top)
3. Imports any components you specify
4. Converts markdown to HTML
5. Renders Astro components as real DOM elements
6. Outputs static HTML with embedded JavaScript for interactivity

This is how the <Lottie> component below renders as actual animated SVG instead of just plain text!

To use MDX in Astro:

1
pnpm add @astrojs/mdx

Then add to astro.config.mjs:

1
import mdx from '@astrojs/mdx';
2

3
export default defineConfig({
4
  integrations: [mdx()],
5
  // ...
6
});

The Component#

I created a reusable Astro component that:

• Loads Lottie animations from a JSON file
• Supports autoplay and loop options
• Includes optional playback controls
• Uses pure vanilla JavaScript (no framework dependencies)

Usage Example#

Here’s how simple it is to use:

1
---
2
import Lottie from '../../components/Lottie.astro';
3
---
4

5
<Lottie
6
  src="/animations/my-animation.json"
7
  width="400px"
8
  height="400px"
9
  autoplay={true}
10
  loop={true}
11
  controls={true}
12
/>

Live Demo#

Below is a Lottie animation in action. You can use any Lottie JSON file from LottieFiles:

Note: Some Lottie hosting services have CORS restrictions. For best results, download the JSON file and place it in your public/ folder, then use a local path like src="/animations/my-animation.json".

Component Features#

• Vanilla JavaScript: No React, Vue, or other framework needed
• CDN Loading: Automatically loads lottie-web from CDN
• Responsive: Easy to customize width and height
• Controls: Optional play/pause and stop buttons
• Multiple Instances: Can have multiple animations on one page

Props#

Where to Find Lottie Animations#

Browse thousands of free and premium Lottie animations at LottieFiles.com. Search by category, download the JSON, and use it in your project!

Using Local Lottie Files#

The best practice is to download Lottie JSON files and store them locally to avoid CORS issues:

1. Download a Lottie JSON from LottieFiles (click the download button)
2. Place it in your public/animations/ folder
3. Reference it with a local path:

1
<Lottie
2
  src="/animations/my-animation.json"
3
  width="300px"
4
  height="300px"
5
/>

Here’s an example using a local animation:

1
<Lottie
2
  src="/animations/cheerleader.json"
3
  width="400px"
4
  height="400px"
5
  autoplay={true}
6
  loop={true}
7
  controls={true}
8
/>

Next Steps#

You could extend this component with:

• Speed controls
• Progress bar
• Event callbacks (onComplete, onLoop, etc.)
• Hover to play/pause
• Intersection Observer for scroll-triggered animations

Happy animating!