Lottie
Mon Mar 2021

Configuring & Customizing the “” Player

As an animator, you may have several demands. Generally, you may want to bring changes that suit your needs. In this particular blog-post, Animoox demonstrates how you can configure and customize the player to suit your requirements.

Configuring the Player

The coolest thing about the <lottie-player> web component is that it provides a myriad of alternatives to enable you to control the animation on your web page or app. You can control the appearance of the player by using these alternatives along with the general HTML styling options. The alternatives are as follows:

Background: At first, pick the background color of the animation page and set it as transparent to allow the player to showcase what is going on behind the scene of the page. While setting the color, you have either of the two options. The first option is to set the background feature to a valid HTML color such as “white”, “gray”, and “blue”, etc. The second option is to use a hexadecimal color value such as “#FFFFFF”.

Speed: As an animator, the player lets you control the playback speed. 1 is the default speed while and values smaller than 1 can slow it down and values greater than 1 than speed it up. For instance, a value of 0.5 or a fractional value such as 0.75 can lower the speed. On the other hand, a value of 2 or 2.5 can speed the animation up.

Loop: By the use of this feature, the animation will keep on playing and playing. Removing this feature will bring the animation to a stop after playing once. 

Controls: This feature enables you to showcase start, stop, pause, and a seeker bar in certain animations, where it’s relevant to show the control. It would be quite pointless to use this feature if you are the animation as just a design element. 

Autoplay: This feature makes the animation start playing automatically after it is loaded. In case you want to skip this feature, you can still use Javascript to command the player to play whenever you want it to play. 

Customizing the appearance of the player


The <lottie-player> even lets you customize its look to synchronize with the website’s style and design with the use of CSS. The player showcases the many variables of CSS in order to let you modify particular segments of the player. Below we have mentioned particular styles that could enable to you make changes to the variables anywhere you like on your page:

  1. You can set the toolbar height (the default value is 35px) by: –lottie-player-toolbar-height
  2. The toolbar background (the default value is transparent) can be set using: –lottie-player-toolbar-background-color
  3. You can set the toolbar icon color (the default value is #999) by: –lottie-player-toolbar-icon-color
  4. The toolbar icon hover color (the default value is #222) can be set by: –lottie-player-toolbar-icon-hover-color
  5. The toolbar icon active color (the default value is #555) can be set by: –lottie-player-toolbar-icon-active-color
  6. You can set the seeker track color (the default value is #CCC) by using:
    –lottie-player-seeker-track-color
  7. The seeker thumb color can be set by:
    –lottie-player-seeker-thumb-color; The default value is rgba (0, 107, 120, 0.8)

If we were to provide an example on how to change the seeker track and thumb color to orange colors then it would be:

<style>

  lottie-player {

–lottie-player-seeker-track-color: #e48509;

–lottie-player-seeker-thumb-color: #ffcc00;

  }

</style>

So, to sum up, using these codes appropriately can help you configure and customize the <lottie-player> player according to your needs.

Let’s work Together

At Animoox, we bring together our client’s opinions and our creativity to create effective and memorable animation.