Examples

Integrating the animations on your web page is really easy. Here we've hand-picked several animations and show you how you can play and control them using the web player API.

Simple playback

spirit.loadAnimation({
  loop: true,
  path: './cactus.json'
});

Mouse

spirit.loadAnimation({
  autoPlay: false,
  path: './animation.json'
}).then(timeline => {
  window.onpointermove = e => timeline.progress(
    e.clientX / window.innerWidth
  );
});

Animation created by Timo Kuilder

Scroll

Stackoverflow scrolled()

spirit.loadAnimation({
  autoPlay: false,
  path: './hamburger.json'
}).then(timeline => {
  window.onscroll = () => {
    timeline.progress( scrolled() );
  };
});

Viewport

Example is using the IntersectionObserver.

const container = document.querySelector('.container');

spirit.loadAnimation({
  container,
  autoPlay: false,
  path: './hamburger.json'
}).then(timeline => {
  new IntersectionObserver(
    ([{ isIntersecting }]) => {
      isIntersecting
        ? timeline.resume()
        : timeline.pause(0);
    }
  ).observe(container);
});

Responsive

Use window.matchMedia.

const show = (className, path) => {
  gsap.set(className, { display: 'block' });
  spirit
    .loadAnimation({ path, loop: true })
    .then(() => gsap.set(className, { autoAlpha: 1 }));
}

const hide = className => {
  gsap.set(className, { autoAlpha: 0, display: 'none' });
}

window.matchMedia('(max-width: 640px)')
  .addEventListener("change", ({ matches }) => {
    if (matches) {
      hide('.animation-b');
      show('.animation-a', './animation-a.json');
    } else {
      hide('.animation-a');
      show('.animation-b', './animation-b.json');
    }
  };

Drag the preview window handle to see the effect. In this example, the animation data is being fetched, loaded and cached

Reuse animation

Reuse same animation data on multiple container elements.

const path = './animation.json';
const $ = query => document.querySelector(query);

// load animation on container-a
spirit.loadAnimation({
  path,
  container: $('.container-a')
});

// load animation on container-b
spirit.loadAnimation({
  path,
  container: $('.container-b')
});

Tutorial

Follow along with the hamburger tutorial.