Add Interactivity

Adding interactivity is really easy!

The Web Player creates a valid GSAP Timeline for you.

Use the GSAP Timeline API to interact with the created animation.


Let's say we have 3 animation groups in our groups.json with:

  1. name intro
  2. name cards
  3. name logos

Loading the animations and adding some interactivity can be done with a few lines of code:

const getTimeline = (name) => {
  return spirit.groups.get(name).timeline

spirit.setup().then(() => { // first load gsap from cdn

  // load animations to container element
  spirit.load('groups.json', containerEl).then(groups => {

      // construct all timelines

      // get all timelines
      const timelines = {
        intro: spirit.groups.get('intro').timeline,
        cards: spirit.groups.get('cards').timeline,
        logos: spirit.groups.get('logos').timeline

     // infinitely play intro

     // animate cards on mouse move
     window.onmousemove = ({ clientX }) => {
         clientX / window.innerWidth

     // animate logos on scroll y
     window.onscroll = () => {
         doc.scrollTop / (doc.scrollHeight - doc.clientHeight)



For demo purpose, I've used .progress() to update the timeline position, but the possibilities are endless. You can even hook into a timeline and trigger other timelines. It's up to you!

Here's an example animation created by Timo Kuilder - Zwarte Koffie

Move mouse, works on touch devices as well

results matching ""

    No results matching ""