DEV Community

Sean Perkins for TeamHive

Posted on


Using Lottie Animations inside Angular or Ionic 4

Getting Started

We will need to install the required web components to render and play the Lottie animation. We will be using the player maintained by our team at TeamHive. This package was ported from the original player to be built and compiled with StencilJS. This allows the player to be used in Webpack environments (i.e. Angular).

Install the web component:

npm install --save @teamhive/lottie-player
Enter fullscreen mode Exit fullscreen mode

Register the web component in your main.ts.

import { defineCustomElements } from '@teamhive/lottie-player/loader';


Enter fullscreen mode Exit fullscreen mode


When dealing with web components in an Angular application, you need to apply the correct schema on the module containing the component/page.

Enter fullscreen mode Exit fullscreen mode


LottieFiles is a website of both free and premium lottie animations that you can easily adapt and use in your application or website.

LottieFiles Website

Find an animation that you like, select it and click the "html" output to find the JSON path. This path will be used in your application.


If you are using your application offline, you will need to download the JSON and reference it locally from your application.

Integrating Into Your App

Let's add a button to our view and embed the lottie-player component with our JSON we've selected from the previous step.

<ion-button fill="outline" expand="block">
    <lottie-player slot="end" autoplay loop src="">
Enter fullscreen mode Exit fullscreen mode

If we run this example we should see this:


At this point you are up and running with an embedded lottie animation in your application.

Additional Styling

If in this example you want to style the animation at the end of the ion-button, you can apply this mark-up.

lottie-player {
    position: absolute;
    transform: translateX(40%) scale(0.75);

Enter fullscreen mode Exit fullscreen mode

You can adjust the transform based on your animation's size and width of the button control. I would also recommend using a class or id selector for the styling.


Top comments (6)

hamzahalvanaa profile image
Lordrauf • Edited

could this lottie-player using inside loading controller on Ionic 4/5?

i have trying but the animations doesn't play.

const loading = await this.loadingCtrl.create({
  spinner: null,
  translucent: true,
  backdropDismiss: false,
  message: `<lottie-player slot="end" autoplay loop src="">
await loading.present();
Enter fullscreen mode Exit fullscreen mode
chilupa profile image
Pavan Chilukuri • Edited

Appreciate your write up. How do I make it work in my scenario below.
I already have import { defineCustomElements } from '@ionic/pwa-elements/loader'; statement in main.ts file.
How do i add import { defineCustomElements } from '@teamhive/lottie-player/loader'; in this case?
Could you please help? I'm using Ionic 5

seanperkins profile image
Sean Perkins

With TypeScript, you can import a class/const/etc. with an alias, to avoid name collision.

For example, you could do this:

import { defineCustomElements as defineLottieCustomElements } from '@teamhive/lottie-player/loader';


You can name the variable whatever you'd like, with the as syntax.

jdnichollsc profile image
J.D Nicholls

Excellent, thanks for sharing mate! And also we can animate any html element using this other WebComponent =>

pra3t0r5 profile image

Thank you very much sir, you just solved my problem. I was not begin able to make it work correctly!
(Tested with NodeJS : v12.16.1 and @ionic/angular 5.0.5)

khurz10dom profile image
knee key

how do you start the animation programmatically? like by pressing a button (not from the controls of the player)?

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git