I Created a New Lottie Animation Page – Please Enjoy It!

I recently built a new Lottie animation page using only HTML, CSS, and JavaScript. No frameworks – just pure and simple static code.

The animation is powered by Lottie Web, and the JSON animation data is loaded remotely from a hosted file. To make the experience more fun, I also added a floating snowflake effect and several types of animated flying birds using emojis.

👇 Try the Live Demo

🔧 Tech Overview

Pure HTML, CSS, and JavaScript
Lottie Web to render animations from a remote JSON
Bird and snowflake effects added with emoji-based CSS animations

🛠️ Code Example

Below is a basic example of how to use the @lottiefiles/dotlottie-web library to render a Lottie animation:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>@lottiefiles/dotlottie-web | basic example</title>
  </head>
  <body>
    <!-- Canvas element where the Lottie animation will be rendered -->
    <canvas id="canvas" width="300" height="300"></canvas>
    <script type="module">
      import { DotLottie } from 'https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm';

      new DotLottie({
        autoplay: true,
        loop: true,
        canvas: document.getElementById('canvas'),
        src: 'https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie', // or .json file
      });
    </script>
  </body>
</html>

Thanks for checking it out — let me know what you think or if you’d like to remix it with your own style! 🕊❄️

Stay curious, stay creative.