Fazal Shah

Posted on Jun 8

How to Add Lottie Animations to WordPress Without a Plugin (2025)

Most guides tell you to install a WordPress plugin to use Lottie animations. But plugins add bloat, require updates, and often lock features behind a premium tier.

You don't need any of that. Here's how to add Lottie animations to any WordPress site with 10 lines of JavaScript and zero plugins.

What You'll Need

A WordPress site (any theme)
A Lottie animation file (.json or .lottie)
Access to your theme's functions.php or a custom HTML block

Step 1: Prepare Your Animation

Before adding to WordPress, preview your animation and get it right.

Use IconKing â a free browser tool â to:

Preview how the animation looks
Edit colors if they don't match your brand
Convert to .lottie format if you want smaller file size (.lottie is ~75% smaller than .json)

No account needed. Drop the file, preview, adjust, download.

Step 2: Upload the Animation File

In WordPress admin, go to Media â Add New
Upload your .json or .lottie file
Copy the file URL (something like https://yoursite.com/wp-content/uploads/2025/01/animation.json)

Step 3: Add the HTML and JavaScript

The simplest approach â add a Custom HTML block anywhere in your post or page:

<!-- Lottie container -->
<div id="my-lottie-animation" style="width: 300px; height: 300px;"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
  lottie.loadAnimation({
    container: document.getElementById('my-lottie-animation'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'https://yoursite.com/wp-content/uploads/2025/01/animation.json'
  });
</script>

Replace the path with your actual file URL from Step 2.

Step 4 (Optional): Load the Script Properly via functions.php

The Custom HTML block approach works but loads lottie.js on every page. If you want it only on specific pages or loaded via WordPress's proper asset queue:

Open functions.php and add:

function enqueue_lottie_script() {
    // Only load on pages that need it
    if ( is_page( array('home', 'about') ) ) {
        wp_enqueue_script(
            'lottie',
            'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js',
            array(),
            '5.12.2',
            true // Load in footer
        );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_lottie_script' );

Then in your template or custom HTML block, just use the animation code without the <script src="...lottie.min.js"> line (it's already loaded by WordPress).

Step 5 (Optional): Using dotLottie Format

If you converted your file to .lottie format (recommended for smaller file size), the player is slightly different:

<dotlottie-player 
  src="https://yoursite.com/wp-content/uploads/2025/01/animation.lottie"
  autoplay 
  loop
  style="width: 300px; height: 300px;">
</dotlottie-player>

<script src="https://cdn.jsdelivr.net/npm/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

The custom element (<dotlottie-player>) loads as a web component â no WordPress-specific setup needed.

Using with Elementor, Divi, or Beaver Builder

If you're using a page builder, look for an HTML widget or Code widget and drop the same code in. All major page builders support raw HTML blocks.

For Elementor specifically:

Search for "HTML" in the widget panel
Drop an "HTML" widget onto your section
Paste the animation code
Click Update

Making the Animation Responsive

The fixed 300px width won't scale on mobile. Use this instead:

<div id="my-lottie-animation" style="width: 100%; max-width: 400px; aspect-ratio: 1;"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
  lottie.loadAnimation({
    container: document.getElementById('my-lottie-animation'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: '/wp-content/uploads/2025/01/animation.json'
  });
</script>

aspect-ratio: 1 keeps a square container. For a 16:9 animation, use aspect-ratio: 16/9.

Performance: Load Only When Visible

If the animation is below the fold, lazy load it with Intersection Observer:

<div 
  id="my-lottie-animation" 
  data-lottie-src="/wp-content/uploads/2025/01/animation.json"
  style="width: 100%; max-width: 400px; aspect-ratio: 1;">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const el = entry.target;
        lottie.loadAnimation({
          container: el,
          renderer: 'svg',
          loop: true,
          autoplay: true,
          path: el.dataset.lottieSrc
        });
        observer.unobserve(el);
      }
    });
  }, { rootMargin: '200px' });

  document.querySelectorAll('[data-lottie-src]').forEach(el => {
    observer.observe(el);
  });
</script>

This approach:

Loads lottie.js immediately (small, ~60KB gzipped)
Defers each animation until it's 200px from the viewport
Works for multiple animations on the same page

Comparing to Plugin-Based Approaches

	No Plugin (this guide)	AM LottieFiles Plugin	LottieFiles Free Plugin
Cost	Free	Free (limited)	Free
Customization	Full	Moderate	Limited
Page weight	Minimal	Plugin overhead	Plugin overhead
Maintenance	None	Plugin updates	Plugin updates
dotLottie support	Yes	Yes	No

The plugin approach is fine if you're non-technical and need a visual interface. But if you're comfortable with HTML blocks or templates, the no-plugin approach is cleaner and lighter.

Summary

Preview and prepare your animation with IconKing
Upload to WordPress Media Library
Add a Custom HTML block with the lottie.js script
Optional: use dotLottie format for 75% smaller files
Optional: lazy load for below-fold animations

No plugin needed. No monthly fee. No outdated dependency to maintain.

Questions? Drop them in the comments â happy to help with specific theme setups.

DEV Community