An Overview of the Best Lottie SW Libraries–Part 1

09/04/2022
blog

Lottie is a fast-growing animation format, which is quickly traversing through the industry of every kind towards the big names. Companies like Fiverr, IHeartRadio, Google, and New York Times use Lottie animations in their apps and projects. Many platforms are emerging that sell and promote Lottie animations –Vidalgo being one of them, and several businesses have acknowledged the speed and quality of vector-based animations on websites. When everyone is experimenting, why should the designers stay behind?

That is why, in this post, we will be giving an overview of the best software libraries for Lottie so the designers and creators can have a quick resource they can peruse anytime they want!

Best Software Libraries for Lottie

A software library is an open-source set of well-tested, pre-written, easily implementable code to perform useful tasks. Software libraries not only cut down the time to create logic from scratch; they also act as a learning tool for beginners. So, whether you’re a rookie android developer looking to divulge into the world of Lottie or a well-established web designer, these Lottie SW libraries can surely help you out!

1. Lottie-Player Web Component

Lottie player web-component is a small Lottie library that lets users play Lottie animations and Telegram Stickers on their websites. A web component is any piece of code that works with JavaScript Libraries and can be loaded across modern browsers. Since Telegram Stickers (TGS) consist of JSON text, they can be run like any other Lottie animations on a website.

It offers methods of importing the package into the code using JavaScript, content delivery method, or local installation. Users can utilize the code snippets to load the player directly on their website, or tweak it in other environments, for instance, with NextJS, NuxtJs, and ReactJs.

This library loads the Lottie player and telegram player separately. However, they offer similar properties. Designers can change the background, autoplay, loop, or play the animations when the mouse hovers above them. There are many other tweak-able properties of a Lottie player. For instance, by using the ‘direction’ property set to 1, animations play in the forward direction, and when set to -1, animations can play in the backward direction.

Along with these, there are built-in JavaScript methods for playing animations and descriptive commands to customize the overall appearance of the player on your website. Let’s say you want the player to have a background colour that matches the overall theme of your website; you will use –lottie-player-toolbar-background-color: #e90a0a to get a specific shade of red.

2. Lottie Interactivity Library

Lottie interactivity library is specifically built to be used with the Lottie Player. Using it, designers can make their animations interact with the scrolling or cursor actions of the user.

The installation commands are the same as the Lottie web player: via yarn, npm, and cdn. To use the library, the user must load it first by placing this script into the body of their HTML page:

<script src=”https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js”></script>

Once done, the user must add a valid Lottie animation with an ID set to its name and configure it.

Configuration:

Configuring involves an action array, which includes elements such as seek, play, stop, etc. This array can take multiple elements. Inside the actions array, there are objects which can have values between 0 and 1, with 0 being 0% and 1 being 100%. For instance, the visibility array has start and end values like this: visibility[0,.7]; here, it means that the animation should start when the object is just appearing on the screen and stop when 70% of the object is visible. For the frames array, the ending frame should be where the interactivity should end (mostly the last frame).

This Lottie library also offers several interactivity modes that users must configure. ‘Scroll’ syncs the animation to the scrolling of the window, ‘cursor’ to sync the animation to the cursor position and the newly introduced ‘chain.’

Chain mode allows chaining multiple animation segments depending on how the user interacts with it. For more information, click here.

The library also offers other methods for configuring the animation, such as React and Vue.

3. Lottie-js

For programmers inclined towards object-oriented programming (OOP), this Lottie library can prove to be very handy. The Lottie-js library maps the Lottie JSON entirely to an object-model and hence, makes manipulating and dealing with properties extremely simple. Programmers no longer have to understand the complex structure of the Lottie file to interact with it if they are using this Lottie library.

This Lottie library is written 90% in TypeScript and has a few JavaScript code snippets too. Node.js version 12 or 14 is needed to install it on the local computer from nodejs.org. For more information about the setup, click here.

Structure of Lottie-json Library:

The library has several classes, with the ‘Animation’ class being the root one, carrying the most frequently used parts of the code (helper methods). For example, the command ‘fromURL ( ‘insert the url’); maps the class instance from URL to Lottie JSON, which can be represented by some constant and manipulated.

Following the ‘Animation’ class is the ‘metaclass .’As the name suggests, this class carries metadata information such as author, description, parent (if any), or theme colour. Most of this information is optional. This class has two more methods.

Furthermore, it has classes named Layer, Assets, and Shapes. Lottie files can have several layers and assets. Layers can have different shapes, and shapes can have more shapes inside them.

To print data from animation, programmers can use simple commands, such as console.log(‘Frame Rate’, anim.frameRate). This command will print the file’s frame rate represented by the constant ‘anim’ on the console. Similarly, width, height, and other features can be manipulated by using ‘anim. width and anim. height’, respectively, provided that the Lottie file is represented by this constant.

This library has several detailed features and components to make your life easy. You can read about them in the detailed documentation here.

4. Lottie Toggles for Android

This Lottie library helps you add toggles to your android app. More specifically, this library helps you add customized animated toggles and switches, which they call “a LottieSwitch.”

The implementation is quite basic. The users need to add this Lottie library inside the dependency {} block. Afterwards, they need to add the .json file of the switch inside the specified directory and select the switch in the layout file for it to be visible. Users can also include a listener to attach a sound with the toggle.

Using this library, anyone can add their own .json toggle, play with the toggle speed, and set the value accordingly. Such switches are especially handy when android users want to go from dark mode to light mode and vice versa.

5. Lottie Theming Library

The Lottie theming library allows colour and property extraction from the Lottie itself and creates an editable file. Users can attach self-set themes with their Lottie animations and play the Lottie with multiple themes according to the day’s time or location. For example, users can play a sunny-themed Lottie during a sunny day and a raining-themed Lottie during an overcast day by adding weather parameters as a condition. This Lottie library involves colour extraction by using the Lottie-js library; find more information here.

Configuration:

The Lottie theming library requires some basic configuration to extract colours that can be changed with the theme. After initializing the library and calling the init method, users must call the createConfig() command to obtain the configuration file. Users can view the colour and its exact frame and shape inside the ‘Properties’ array. Using this, custom palettes can be added to the library by directly modifying the ‘Themes’ array in the configuration file, as shown in the example below:

Themes: [

         {
           darkTheme: {
             'Color 0': '#ffffffff',
             'Color 1': '#ffffffff',
             'Color 2': '#000000ff',
             'Color 3': '#000000ff',
 
           }}]
 
 

Now users can apply this theme by calling the applyTheme(themeConfig, themeName). The output of this library is a Lottie that plays with the Lottie player.

Best SW Lottie Library: The Conclusion!

There are tons of libraries present online that let you customize your Lottie entirely to match your brand’s theme and colour palettes. As a programmer, you can create quick custom solutions for your clients or your business. Not only that, you can utilize these libraries to incorporate Lottie files into various platforms, for instance, IOS, Andriod, Web, and Flutter.

Click on the animation for more options

Don’t know where to find animations for your project –look no further! Vidalgo is introducing an online community of artists and creators where you can sell and purchase Lottie animations for every occasion and purpose. So, what are you waiting for? Visit Vidalgo today!

Other Posts

blog
Best Lottie Players, Plugins and Tools
30/04/2022
Lottie has revolutionized the world of animation. To give a very basic definition, Lottie is a file format specific for animations, much like GIF. Due to Lottie animations, users can now display high-quality animations without any problems, such as pixelation, large file size, or slow webpage loading speeds. A single Lottie file is many times […]
blog
Infographics Trends and Animated Infographics in 2022
23/04/2022
With the rise of social media usage, visual content is becoming more and more popular than mere texts. From informational videos to sending memes to your friends and family, visual content is what people love nowadays. A popular type of visual content is infographics- packed with information, made to be attractive to the audience. Want […]
blog
7 Best Lottie Marketplaces To Help With Your Projects
16/04/2022
The Internet has brought the world closer, and sharing information has become extremely easy in this day and age. Today, there are numerous methods that let you share information, from videos to text and infographics to images. One such method is the use of animations which gives lets you provide information in a highly expressive […]