| 1 | <p align="center">
|
| 2 | <img src="https://spiritapp.io/banner.jpg" alt="Spirit" width="100%" />
|
| 3 | </p>
|
| 4 |
|
| 5 | <h1 align="center">Spirit ⚡️ Web Player</h1>
|
| 6 |
|
| 7 | <p align="center">
|
| 8 | <a href="https://travis-ci.org/spirit/spirit">
|
| 9 | <img src="https://img.shields.io/travis/spirit/spirit.svg" alt="travis" />
|
| 10 | </a>
|
| 11 | <a href="https://npmjs.org/package/spiritjs">
|
| 12 | <img src="https://img.shields.io/npm/v/spiritjs.svg" alt="version" />
|
| 13 | </a>
|
| 14 | <a href="https://greensock.com/gsap">
|
| 15 | <img src="https://img.shields.io/badge/gsap-v2.1.2-brightgreen.svg" alt="greensock" />
|
| 16 | </a>
|
| 17 | <a href="https://npmjs.org/package/spiritjs">
|
| 18 | <img src="https://img.shields.io/npm/dm/spiritjs.svg" alt="downloads" />
|
| 19 | </a>
|
| 20 | <a href="https://github.com/spirit/spirit/releases/latest">
|
| 21 | <img src="https://img.shields.io/github/release-date/spirit/spirit.svg" alt="release" />
|
| 22 | </a>
|
| 23 | </p>
|
| 24 |
|
| 25 | <p align="center">
|
| 26 | <b>Lightweight and easy to use</b>
|
| 27 | <br />
|
| 28 | <sub>Play your animations on the web<sub>
|
| 29 | </p>
|
| 30 |
|
| 31 | ### Getting Started:
|
| 32 |
|
| 33 | - [Spirit Homepage](https://spiritapp.io)
|
| 34 | - [Get Started](https://spiritapp.io/getstarted)
|
| 35 | - [Documentation](https://docs.spiritapp.io)
|
| 36 |
|
| 37 | ### Browser:
|
| 38 |
|
| 39 | ```html
|
| 40 | <svg>
|
| 41 | <g id="container">
|
| 42 | <path d="..." data-spirit-id="body" />
|
| 43 | <path d="..." data-spirit-id="mouth" />
|
| 44 | <path d="..." data-spirit-id="legs" />
|
| 45 | </g>
|
| 46 | </svg>
|
| 47 |
|
| 48 | <script src="https://unpkg.com/spiritjs/dist/spirit.min.js"></script>
|
| 49 | <script>
|
| 50 | spirit.loadAnimation({
|
| 51 | path: './animation.json',
|
| 52 | container: dcument.getElementById('container')
|
| 53 | }).then(
|
| 54 | timeline => timeline.play()
|
| 55 | );
|
| 56 | </script>
|
| 57 | ```
|
| 58 |
|
| 59 | ### Node:
|
| 60 |
|
| 61 | install:
|
| 62 |
|
| 63 | ```bash
|
| 64 | npm install spiritjs --save
|
| 65 | ```
|
| 66 |
|
| 67 | usage:
|
| 68 |
|
| 69 | ```js
|
| 70 | import spirit from 'spiritjs';
|
| 71 |
|
| 72 | spirit.loadAnimation({ path: './animation.json' }).then(
|
| 73 | timeline => timeline.play()
|
| 74 | );
|
| 75 | ```
|
| 76 |
|
| 77 | For more info check out the [API Documentation](https://docs.spiritapp.io/web-player/simple-api.html).
|
| 78 |
|
| 79 | ### Links
|
| 80 |
|
| 81 | - [Documentation - What is Spirit](https://docs.spiritapp.io/spirit.html)
|
| 82 | - [Documentation - Install Web Player](https://docs.spiritapp.io/web-player/install.html)
|
| 83 | - [Documentation - Simple Usage](https://docs.spiritapp.io/web-player/simple-api.html)
|
| 84 | - [Documentation - Extended Usage](https://docs.spiritapp.io/web-player/extended-api/)
|
| 85 |
|
| 86 | ### Examples
|
| 87 |
|
| 88 | <p>
|
| 89 | <img src="https://user-images.githubusercontent.com/232559/33662370-d6898552-da8b-11e7-9909-73334a313217.gif" width="210" />
|
| 90 | <img src="https://user-images.githubusercontent.com/232559/33662484-32b64996-da8c-11e7-9122-52712925ab1e.gif" width="210" />
|
| 91 | <img src="https://user-images.githubusercontent.com/232559/33662504-440d4d66-da8c-11e7-8d21-fcb1ed87da50.gif" width="210" />
|
| 92 | <img src="https://user-images.githubusercontent.com/232559/33662538-57d89076-da8c-11e7-9dc8-55f70a31feeb.gif" width="210" />
|
| 93 | <img src="https://user-images.githubusercontent.com/232559/33662552-64e1972c-da8c-11e7-827f-5ae63e822aa0.gif" width="210" />
|
| 94 | <img src="https://user-images.githubusercontent.com/232559/33662567-743a4a48-da8c-11e7-8e97-8d4019929883.gif" width="210" />
|
| 95 | <img src="https://user-images.githubusercontent.com/232559/33662579-886a97ac-da8c-11e7-9e99-0fc55aa24ffd.gif" width="210" />
|
| 96 | <img src="https://user-images.githubusercontent.com/232559/33662592-9a93309c-da8c-11e7-9c15-1dfc11871831.gif" width="210" />
|
| 97 | </p>
|