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/lottie-web@4.2.4/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!