Working with Lottie 29 Apr 2020  ■1 Comment

How to add a Lottie animation in a web page

So you have a webpage or web app that you’d like to spruce up by taking advantage of the super small file size and resolution independent rendering enabled by the Lottie animation format. You may have got an animator to create a bespoke animation for you and exported it out from After Effects using the free LottieFiles for After Effects extension. Or you may have browsed through the 1000s of free Creative Commons licensed animations on the LottieFiles website and decided to use one of them. You may even have taken one of those animations and customised the animation to suit your needs and website using the free LottieFiles editor.

You’ve got the Lottie or dotLottie format file. Let’s get started on adding it to your webpage. You can use this approach on any webpage, blog or platform that lets you edit HTML.

It’s a three step process.

1. Add the script tag to the LottieFiles web player component

LottieFiles maintains the <lottie-player> web component that enables using our custom web component to easily add a Lottie player anywhere on your webpage. To add the web component, you need to grab the script URL to the player and add it to the <head> section of your page HTML (or anywhere on the page).

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

2. Get the URL of the animation

There are a couple of ways to get the URL of the animation.

If you have made or downloaded a Lottie animation and would like to host it on your own website, upload the Lottie (dotLottie or JSON) file to your website using the media/file manager that you use and get its URL.

If you are using a community made animation on LottieFiles, we provide you a public link to the Lottie file that you can use.

Here's where you can find the link for public Lottie animations.

3. Add the <lottie-player> element pointing to the URL of the animation.

Once you have the URL, copy and paste the below code into your webpage or web app’s HTML where you would like it to appear. Replace the <URL HERE> bit with the URL to your Lottie file. Make sure the Lottie URL appears inside double quotes as seen in the code below.

<lottie-player src="<URL HERE>" background="transparent"  speed="1"  style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>

That’s it! Save and preview your page to see the animation.

Configuring the Player

The <lottie-player> web component provides a bunch of options to refine and control how you would like the animation to appear on your page. You can use these options in addition to using the usual HTML styling options to control the appearance of the player.

The <lottie-player> can be customized using the following attributes:

Background: Set the background color of the animation stage. Set it as transparent to let the player show through whatever is on the background of your page. This is a great default setting. You can set the background attribute to a valid HTML color attribute like “white” or a hexademical color value like “#FFFFFF” to set the background color.

A Lottie animation with it's background color changed

Speed: Set the playback speed. 1 is the default speed as intended by the animator. You can have values smaller than 1 to slow it down. For example, a speed value of 0.5 will slow down the animation by half. Values greater than 1 can be used to speed up playback. For example, a value of 2 will play the animation at twice the speed. You can also use fractional values like 0.75 or 1.5 to tune the speed to your liking.

Loop: Adding this attribute makes the animation play forever by looping. Without this attribute, the animation will play once and stop.

Controls: Adding this attribute makes the player show start, stop, pause and a seeker bar. Use of this attribute depends on your intended use for the animation. If you are using the animation as a design element, you would probably want to skip this attribute to not show the controls.

Autoplay: Adding this attribute makes the animation start playing automatically as soon as it is loaded. If you do not specify this attribute, you will have to use Javascript to instruct the player to start playing when you would like it to play.

This is what the Lottie Web-Player looks like.

Customizing the appearance of the player

You can customize the look of the player to match your website’s style and design using CSS. In addition to the normal CSS techniques you already use, the player makes it easier by exposing CSS variables to customize specific aspects of the player.

The player exposes the following CSS variables, you can override them by placing the styles anywhere on your page:

--lottie-player-toolbar-height
This sets the toolbar height. The default value is 35px.

--lottie-player-toolbar-background-color
This sets the toolbar background color. The default value is transparent.

--lottie-player-toolbar-icon-color
This sets the toolbar icon color. The default value is #999.

--lottie-player-toolbar-icon-hover-color
This sets the toolbar icon hover color. The default value is #222.

--lottie-player-toolbar-icon-active-color
This sets the toolbar icon active color. The default value is #555.

--lottie-player-seeker-track-color
This sets the seeker track color. The default value is #CCC.

--lottie-player-seeker-thumb-color
This sets the seeker thumb color. The default value is rgba(0, 107, 120, 0.8).

For example, to change the seeker track and thumb color to orange colors:

<style>
  lottie-player {
	--lottie-player-seeker-track-color: #e48509;
	--lottie-player-seeker-thumb-color: #ffcc00;
  }
</style>

See, the colors have been changed!

For more advanced features and documentation, checkout the Lottie Web-Player GitHub page.

Adding Interactivity to your animations

Other cool things you can do is add interactivity to your animations. Some interactivity possibilities that you can achieve with your Lottie animations are available for you here.

Time saver tip!

You can use our Lottie Web Player page to quickly generate the code for the player and customise it’s appearance.

Enter the URL to your Lottie file and play around with the options until it is looking exactly like how you would like it to appear. Then generate the code and copy the code into your website’s HTML!

Try it out for yourself and play around with our Lottie Web-Player.

Comments