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

Simple playback

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

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

Scroll

Stackoverflow scrolled()

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

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

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 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

Tutorial

Follow along with the hamburger tutorial.

  • Spirit
  • Support
  • Terms