Learn with us how to create lottie animations in CSS and Javascript!
If you found us on TikTok on the following post, check out this article and copy-paste the full code!
Happy coding! 😻
@creative.tim ♬ Don't Let Me Go - Lane 8 & Arctic Lake
Contents:
1. HTML Code
2. CSS Code
3. Javascript Code
Get your code ⬇️
1. HTML Code
<div class="wrapper">
<h1>Render Remote Animation with JS</h1>
<div
id="svg__00"
class="lottie"
></div>
<h1>Render Inline Animation with JS</h1>
<div
id="svg__01"
class="lottie"
></div>
<h1>Render Remote Animation with Data Attributes</h1>
<div
id="svg__02"
class="lottie"
data-animation-path="https://assets10.lottiefiles.com/packages/lf20_r2CgaB.json"
data-autoplay="true"
data-rederer="svg"
data-anim-loop="true"
data-name="Lottie Animation"
></div>
</div>
2. CSS Code
body {
background: #000;
color: white;
text-align: center;
padding: 4rem;
font-family: 'Sanchez', serif;
}
h1 {
font-size: 2rem;
margin: 0 0 1rem;
}
.wrapper {
width: 70%;
margin: 0 auto;
}
.lottie {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 400px;
margin: 0 0 3rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
3. Javascript Code
const animationRemote = bodymovin.loadAnimation({
container: document.getElementById('svg__00'),
path: 'https://assets9.lottiefiles.com/packages/lf20_hKebN8.json',
autoplay: true,
renderer: 'svg',
loop: true
})
const animationInline = bodymovin.loadAnimation({
container: document.getElementById('svg__01'),
autoplay: true,
renderer: 'svg',
loop: true,
animationData: {"v":"5.5.1","fr":29.9700012207031,"ip":0,"op":35.0000014255792,"w":300,"h":300,"nm":"Master-Comp","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[150,150,0],"ix":2},"a":{"a":0,"k":[150,150,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[60,60,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":12,"s":[105,105,100]},{"t":15.0000006109625,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[7.619,-8.417],[0,0],[1.058,1.168],[0,0],[-8.027,8.028],[0,0],[-8.319,-8.319],[0,0],[0,0],[-8.319,-8.319],[0,0]],"o":[[0,0],[-1.056,1.168],[0,0],[-7.618,-8.417],[0,0],[8.318,-8.319],[0,0],[0,0],[8.318,-8.319],[0,0],[8.027,8.028]],"v":[[37.234,-1.575],[1.973,37.379],[-1.975,37.379],[-37.234,-1.575],[-36.505,-30.932],[-35.772,-31.663],[-5.648,-31.663],[0.001,-26.015],[5.648,-31.663],[35.773,-31.663],[36.505,-30.932]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[11.438,11.438],[11.438,-11.439],[11.439,-11.439],[-11.438,-11.438],[0,0],[-2.118,2.391],[0,0]],"o":[[-11.438,-11.439],[-11.438,-11.439],[-11.438,11.438],[0,0],[2.119,2.391],[0,0],[11.438,-11.438]],"v":[[41.421,-37.311],[0.001,-37.311],[-41.421,-37.311],[-41.421,4.11],[-3.986,46.359],[3.986,46.359],[41.421,4.11]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.37,0.37,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[150,148.869],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150.000006109625,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Love","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[150,150,0],"ix":2},"a":{"a":0,"k":[150,150,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":300,"h":300,"ip":0,"op":150.000006109625,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Background","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[150,150,0],"ix":2},"a":{"a":0,"k":[7,-1,0],"ix":1},"s":{"a":0,"k":[156.25,156.25,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[192,192],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.97, 0.6, 0.6, 1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[7,-1],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150.000006109625,"st":0,"bm":0}],"markers":[]}
})
I hope you did find this tutorial useful!
For more web development or UI/UX design tutorials, follow us on:
Other useful resources:
