164

GitHub - spirit/spirit: Spirit - The animation tool for the web

 6 years ago
source link: https://github.com/spirit/spirit
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Spirit

Spirit zap Web Player

Lightweight and easy to use
Play your animations on the web

Getting Started:

Browser:

<svg>
  <g id="container">
    <path d="..." data-spirit-id="body" />
    <path d="..." data-spirit-id="mouth" />
    <path d="..." data-spirit-id="legs" />
  </g>
</svg>

<script src="https://unpkg.com/spiritjs/dist/spirit.min.js"></script>
<script>
  spirit
    .loadAnimation({
      path: './animation.json',
      container: dcument.getElementById('container'),
    })
    .then(timeline => timeline.play());
</script>

Node:

install:

npm install spiritjs --save

Usage:

// load GSAP from CDN

import spirit from 'spiritjs';

spirit.loadAnimation({ path: './animation.json' }).then(timeline => timeline.play());
// use existing GSAP instance

import gsap from 'gsap';
import spirit from 'spiritjs';

spirit.setup(gsap).then(() => {
  spirit.loadAnimation({ path: './animation.json' }).then(timeline => timeline.play());
});

For more info check out the API Documentation.

Links

Examples


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK