Spirit - Player for the Web
Lightweight and easy to use
Play your (with Spirit Studio) created animations directly on your web page
❯ Getting Started:
❯ Install
- Documentation - What is Spirit
- Documentation - Install Web Player
- Documentation - Simple Usage
- Documentation - Extended Usage
browser:
<script src="https://unpkg.com/spiritjs/dist/spirit.min.js"></script>node:
# with npm
npm install spiritjs --save
# or yarn
yarn add spiritjs❯ Usage
<!--include the runtime-->
<script src="https://unpkg.com/spiritjs/dist/spirit.js"></script>
<!--script to play the created animation-->
<script>
// Basic Usage
// note: use `path` or `animationData`
// to determine how to load animation data
// load animation data
spirit.loadAnimation({
loop: true,
yoyo: true,
delay: 0,
autoPlay: true,
path: './animation.json',
animationData: data
}).then(
// play it
timeline => timeline.play()
)
// Extended Usage
// load GSAP from CDN
spirit.setup().then(() => {
// load animation data
spirit.load('animation.json').then(groups => {
// construct first group and play it
groups.at(0).construct().play()
})
})
</script>Head over to the API Documentation for more information.
Examples
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent