Surely you've seen some GIF-like elements on web pages that attract a lot of attention because of their movement and design, and you're wondering: What are these elements? and How can I use them in my web page??
Well, this is precisely what you will learn, but using React JS.
Any kind of feedback is welcome, thanks and I hope you enjoy the article.π€
Lottie is a library created by Airbnb to facilitate the creation of animations for different platforms.
A Lottie file is composed of a JSON file. This means that, if you have knowledge of this type of file, you can modify both its appearance and its variables (although there are also applications that allow you to modify them in an easier way).
Lottie files work on any device and can be scaled without loss of quality, just like an SVG file.
Β
ποΈ Difference between GIF and Lottie.
The big difference between animated GIFs and Lottie files is that GIFs are made up of images and Lottie files are generated through code in a JSON file, which allows them to be completely customized.
In terms of loading times, Lottie files are much faster than most GIF files and have a lower weight than GIFs.
Β
ποΈ Websites where you can download Lottie files.
The Player component needs a property that is mandatory, which is the src. Which receives a string.
And where do we get that src??
This property can be located in some page where you can download Lottie files. (in this case, we will use the page of LottieFiles).
1- First, we log in or create an account at LottieFiles.
2- We search for a Lottie and select it.
3- The most probable thing is that under the Lottie you will see some options and one of them will be the Lottie Animation URL and that URL will be the one that we will place in the property src of the component Player.
π¨ Note: You must put a width and height to this Player component. You can use the style property that the component offers; in this case I do it through a className and CSS styles.
Property that receives a numeric value (1 or -1) and which manages in which direction the animation should be performed (starting from the beginning to the end or starting from the end to the beginning). By default its value is 1.
To obtain the reference to the Player component is similar to how we would do it with a JSX component. We only need to use the property ref and in conjunction with the hook useRef, we would already have what we need.
Apart from the Player component, there is also another component called Controls , and to use it it must be nested inside the Player component as follows:
This component receives several parameters, but we will only mention some of them, such as:
visible. Property that allows to make visible or not, the control box. It only accepts boolean values.
darkTheme. Property that allows to change the appearance of the control box to a dark theme. Only accepts boolean values.
buttons. Property that allows to display the buttons that can have the control box. It only accepts an array of strings with some of the following values:
I made this example also so that you can observe these controls. Take a look at it! π Go to the section of the 'Live demo'
Β
ποΈ Conclusion.
Lottie files are a better option to decorate your website and bring it to life with these animations. It is an increasingly used element in web design. π
π¨ But nevertheless, you must have control over the amount of animations you place, you don't want to overload your website and slow it down.
π¨ And also, you should be careful where you download these files from, because remember they are code based! So you should look for viable sources.