Add Interactivity

Adding interactivity is super easy!

The runtime 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:

import spirit from 'spiritjs'

(async () => {

  // first setup gsap
  await spirit.setup()

  // load animations to our container element
  const groups = await spirit.load('groups.json', document.querySelector('.container'))

  // 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
  timelines.intro.eventCallback('onComplete', () => timelines.intro.play(0))
  timelines.intro.play()

  // attach mouse x to cards
  window.onmousemove = ({ clientX }) => timelines.cards.progress(clientX / window.innerWidth)

  // attach scroll y to logos
  const doc = document.documentElement
  window.onscroll = () => timelines.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 ""