Lottie Animation Guide for HTML

Learn how to integrate Lottie animations into your HTML page effortlessly.

1. Include Lottie Script

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.6/lottie.min.js"></script>

2. Add a Container for Animation

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

3. Load and Play Animation

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

4. Control Animation

animation.pause(); // Pause
animation.play(); // Play
animation.stop(); // Stop

5. Get Lottie Animations

Find free animations at Unicornicons.