API - GSAP Plugins

You can use any GSAP plugin for your animations. Don't forget to register them on your web page before using it in Spirit Studio.

💡 Note on licensing. A Spirit Studio license doesn't give you access to GreenSock's bonus plugins. If you'd like to use bonus plugins like drawSVG or morphSVG, make sure to buy a GreenSock license.

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

// the plugins that needs registration
import DrawSVGPlugin from 'gsap/DrawSVGPlugin';
import MorphSVGPlugin from 'gsap/MorphSVGPlugin';

// register the plugins
gsap.registerPlugin(MorphSVGPlugin, DrawSVGPlugin);

// set gsap instance
spirit.setup(gsap);

// load and play the animation (infinitely)
spirit.loadAnimation({ animationData, loop: true });

If you want Spirit to fetch GSAP from CDN, make sure to register the plugins after setup.

Example (web):

<!-- load spirit -->
<script src="https://unpkg.com/spiritjs/dist/spirit.js"></script>

<!-- load GSAP bonus plugins (Club Greensock) -->
<script src="gsap/MorphSVGPlugin.js"></script>
<script src="gsap/DrawSVGPlugin.js"></script>
<script>
  spirit.setup().then(() => {
    // GSAP is loaded now.. register plugins
    gsap.registerPlugin(MorphSVGPlugin, DrawSVGPlugin);

    // load and play the animations
    spirit.loadAnimation({ animationData, loop: true });
  });
</script>