Get started with auto-animate CDN

MIT licensed

Auto-animate is a lightweight library for creating custom, complex animations with CSS.

Tags:
  • animation
  • transition
  • react
  • vue
  • angular
  • svelte

Stable version

Copied!

How to start using auto-animate CDN


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lottie.min.js"></script>
  <script src="https://cdn.cdnhub.io/auto-animate/0.8.1/index.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div id="container">
    <div id="box1" class="box">
      <lottie-player src="path/to/your/lottie-animation.json" background="transparent" autoplay></lottie-player>
    </div>
    <div id="box2" class="box">
      <lottie-player src="path/to/another/lottie-animation.json" background="transparent" autoplay></lottie-player>
    </div>
  </div>
</body>
</html>

/* CSS */
.box {
  width: 200px;
  height: 200px;
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#box1 {
  left: 50px;
  top: 50px;
}

#box2 {
  left: 350px;
  top: 150px;
}

/* JavaScript */
const animations = [
  {
    targets: '#box1',
    opacity: [0, 1],
    duration: 1000,
    delay: 500,
  },
  {
    targets: '#box2',
    opacity: [0, 1],
    duration: 1500,
    delay: 1000,
  },
];

const animation = new Anime(animations);
animation.play();
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions