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.