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



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

defineCustomElements(window);

Note:

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



schemas: [CUSTOM_ELEMENTS_SCHEMA]

LottieFiles

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.

Note:

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">
    Example
    <lottie-player slot="end" autoplay loop src="https://assets3.lottiefiles.com/packages/lf20_ZWEJL5.json">
    </lottie-player>
</ion-button>

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);
}

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)

Lordrauf • Aug 5 '20 • 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="https://assets3.lottiefiles.com/packages/lf20_uwR49r.json">
  </lottie-player>`
});
await loading.present();

Pavan Chilukuri • May 1 '20 • 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

Sean Perkins • May 3 '20

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';

defineLottieCustomElements(window);

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

J.D Nicholls • Nov 20 '19

Excellent, thanks for sharing mate! And also we can animate any html element using this other WebComponent => github.com/proyecto26/animatable-c...

Pra3t0r5 • Apr 23 '20

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)