https://lottiefiles-anim1.glitch.me/
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, and allows native apps to use animations as easily as they use static assets. Lottie uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="svg hide" id="svg"></div>
<h1>Puppy</h1>
<h1>& Baloon</h1>
<p></p>
<button>fly away</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js" integrity="sha512-BB7rb8ZBAxtdJdB7nwDijJH9NC+648xSzviK9Itm+5APTtdpgKz1+82bDl4znz/FBhd0R7pJ/gQtomnMpZYzRw==" crossorigin="anonymous"></script>
<script>
const play = document.querySelector('button');
const svgContainer = document.getElementById('svg');
const animItem = bodymovin.loadAnimation({
wrapper: svgContainer,
animType: 'svg',
loop: false,
autoplay: false,
path: 'https://assets6.lottiefiles.com/private_files/lf30_ytu7cnmm.json'
});
play.addEventListener('click', () => {
animItem.goToAndPlay(0, true);
})
</script>
</body>
</html>
Comments