Import & Export

Please read the Getting Started page first.

Export

You can export your animation(s) by clicking the copy or save button. The data is outputted as .json and can be loaded with the Spirit runtime.

Animation groups are grouped by a root element (as shown above). You can assign multiple groups to a root.

Animation playback

To embed the animation on your web page you'll need the runtime player to be included.

The Spirit runtime (player) is a tiny javascript library (~10kb) which enables you to play the animations directly on your web page. The runtime player uses GSAP for animation playback, other tween-strategies are in development (like WAAPI).

See also Runtime Install

Play animation from clipboard data:

spirit.loadAnimation({
  animationData: {...}
})

Play animation from url:

spirit.loadAnimation({
  path: './animation.json'
})

The spirit.loadAnimation() is a shorthand syntax. If you need more control there's an extended API as well.

For more information about the runtime API, make sure to follow up on the API documentation.

Example:

<script src="https://unpkg.com/spiritjs/dist/spirit.min.js"></script>
<script>
  spirit.loadAnimation({
    loop: true,
    path: './animation.json'
  })
</script>

Work in progress!

More detailed documentation is coming soon

results matching ""

    No results matching ""