Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Adding Lottie animation in React JS
Lottie is an open source animation file format that’s tiny, high quality, interactive, and can be manipulated at runtime. Let us learn how to implement Lottie animation in React.js. Lottie animations are mainly used for loader screen or as a start screen. It is written and implemented in JSON format in our React projects.
Example
Go to the official Lottie animation website and download Lottie JSON.
Link to animation the I am going to use −
https://lottiefiles.com/74546-character-02#/
Name the JSON file "myloader.json" and keep it at the same level as App.js.
Now install the react-lottie package −
npm i --save react-lottie
Lottie library will be used to add lottie-animation’s JSON file to your React site.
Add the following lines of code in App.js −
import Lottie from "react-lottie";
// importing lottie animation JSON
// note that you can use any variable in place of "animation"
import animation from './myloader.json'
function App() {
const defaultOptions = {
loop: true,
autoplay: true,
// here is where we will declare lottie animation
// "animation" is what we imported before animationData: animation,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice",
},
};
return (
<div>
<Lottie options={defaultOptions} height={300} width={300} />
</div>
);
}
export default App;Here in defaultOptions, we simply added some animation properties and linked to our Lottie animation JSON. Then we rendered a lottieView with our default options and link to animation.
Output
It will produce the following output −
957 Views
