Lottie Animation Web Component

This is a dead simple lottie animation web component, compiled with Stencil.

<lottie-animation src="./assets/lottie_logo.json" autoplay loop controls></lottie-animation>
<script src='https://unpkg.com/lottie-wc/dist/lottie.js'></script>

It's intentionally minimal design so that you can apply your own design language to this.

Using this component

Script tag

• Publish to NPM
• Put a script tag similar to this <script src='https://unpkg.com/lottie-wc/dist/lottie.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install lottie-wc --save
• Put a script tag similar to this <script src='node_modules/lottie-wc/dist/lottie.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install lottie-wc --save
• Add { name: 'lottie-wc' } to your collections
• Then you can use the element anywhere in your template, JSX, html etc

Developing

To start building a new web component using Stencil, clone this repo to a new directory:

git clone https://github.com/splitinfinities/lottie-wc.git lottie-wc
cd lottie-wc
git remote rm origin

and run:

npm install
npm start

To watch for file changes during develop, run:

npm run dev

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Need help? Check out our docs here.