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.

Example

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
      groups.construct()

      // 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
     getTimeline('intro').repeat(-1).play()

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

     // animate logos on scroll y
     window.onscroll = () => {
       getTimeline('logos').progress(
         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 ""