An Interest In:
Web News this Week
- April 27, 2024
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
Adding Lottie Animations to Your Website
What are Lottie animations?
Lottie is a JSON-file format for adding animations to your web and mobile applications. Lottie animations are eye-catching and can communicate messages more effectively than images and text. They make the overall user experience a lot more enjoyable. Lottie animations work on the web, iOS, Android, Windows, and React Native, so no matter what device or browser your audience uses, they'll be able to view them.
Examples:
LottieFiles
LottieFiles is an amazing website where you will find tons of free animations created by designers. And we'll be using their animations for our project. Head over to this page where you will find all the amazing animations. Pick any animation. For our purpose, we'll be using this one:
Below you will find the ''Lottie Animation URL". This is the URL of the JSON file of this animation. Copy it. But how can we use it?
Using Lottie Animations
LottiFiles has an npm package named as @lottiefiles/lottie-player. You can either import it from CDN or can install it.
CDN
<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/tgs-player.js"></script>
NPM
npm i @lottiefiles/lottie-player
import "@lottiefiles/lottie-player";
Usage
Add the element lottie-player and set the src property to a URL pointing to the JSON file which you copied earlier.
<lottie-player src="https://assets4.lottiefiles.com/packages/lf20_l3sfdi9x.json" ></lottie-player>
It accepts some other properties as well which you can use to control the behaviour of the animation:
<lottie-player src="https://assets4.lottiefiles.com/packages/lf20_l3sfdi9x.json" autoplay loop controls background="transparent" speed="1" ></lottie-player>
You can play around with these properties here.
That's it!
Original Link: https://dev.to/shahmir049/adding-lottie-animations-to-your-website-3glg
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To