Get started with lottie-web CDN

MIT licensed

Library for rendering animated JSON graphics in browser, from After Effects or Animate.

Tags:
  • animation
  • canvas
  • svg
  • after effects
  • plugin
  • export

Stable version

Copied!

How to start using lottie-web CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with lottie-web CDN - cdnhub.io</title>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <script src="https://cdn.cdnhub.io/lottie-web/5.12.2/lottie.min.js"></script>
</head>
<body>
  <div id="lottie-container" style="width: 300px; height: 300px;"></div>
  <script>
    async function loadLottie() {
      const animation = lodash.debounce(() => {
        return Lottie.loadAnimation({
          container: document.getElementById('lottie-container'),
          renderer: 'svg',
          loop: true,
          autoplay: true,
          animationData: await fetch('path/to/your/lottie-animation-file.json').then(res => res.json()),
        });
      }, 100);

      animation();
    }

    loadLottie();
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions