Docs

Docs

How to Use Lottie Animations

Welcome to the Lottieicon Library documentation! Follow these steps to easily use Lottie animations in your projects

What is Lottie?

Lottie is a lightweight animation format that uses JSON to render high-quality animations on web and mobile platforms. It works seamlessly with tools like After Effects (via Bodymovin) and is perfect for performance-first UI/UX animation.

Step 1: Choose and Download Your Animation

  • Search and preview from 4863+ animations in the Lottieicon Library.
  • Click Download to get the .json Lottie file.
  • You can also download after effect (AEP) editable file

Step 2: Use Lottie in Web Projects

You can use Lottie animations in your website using either a CDN or by installing the lottie-web package.

Option 1: Use via CDN

Just include the Lottie script in your HTML file and load the animation using JavaScript.

<!-- Include Lottie player via CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.10.2/lottie.min.js"></script>

<!-- Animation Container -->
<div id="lottie" style="width: 300px; height: 300px;"></div>

<script>
  lottie.loadAnimation({
    container: document.getElementById('lottie'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: '/animations/your-animation.json', // replace with your path
  });
</script>

Option 2: Install via npm (React or JS Project)

First, install the package:

npm install lottie-web

Then use it in your React or JavaScript project like this:

import lottie from 'lottie-web';
import { useEffect, useRef } from 'react';

const LottieAnimation = () => {
  const container = useRef(null);

  useEffect(() => {
    const anim = lottie.loadAnimation({
      container: container.current,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: '/animations/your-animation.json', // replace with your path
    });

    return () => anim.destroy();
  }, []);

  return <div ref={container} style={{ width: 300, height: 300 }} />;
};

export default LottieAnimation;

Step 3: Use Lottie in Mobile Projects

First, install the package:

npm i lottie-react-native

Then use it in your React Native project like this:

import React, { useEffect, useRef } from 'react';
import LottieView from 'lottie-react-native';

export default function AnimationWithImperativeApi() {
  const animationRef = useRef(null);

  useEffect(() => {
    // Play full animation
    animationRef.current?.play();

    // Or play a range of frames
    animationRef.current?.play(30, 120);
  }, []);

  return (
    <LottieView
      ref={animationRef}
      source={require('../path/to/animation.json')}
      autoPlay={false}
      loop={true}
    />
  );
}

List of Lottie Packages you explore with other packages:

Use with No-Code Tools

  • Webflow: Use the Lottie widget and upload the JSON file.
  • Framer: Drag and drop the Lottie component.
  • Figma/Protopie: Import via plugins or upload JSON files.
  • PowerPoint/Keynote: Export as GIF or MP4 from your dashboard.

Need Help?

If you have any issues with our service, let us help before you cancel.
We’re happy to provide support or walk you through the best way to use the platform.

📩 Contact: support@lottieicon.com