Zumly with GSAP

Do you need it?

Probably not to start. The default css driver is small and smooth, and every driver follows the same curve for the same ease. Use this one when:

• Your app already loads GSAP, or you want its ease names (expo.out, back.out(1.4)) for the zoom.
• You want to hook into each transition from that library, for logging or to run another animation alongside.

With a script tag

Load GSAP before Zumly and name the driver:

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/zumly/dist/zumly.js"></script>

const app = new Zumly({
  mount: '.canvas',
  initialView: 'home',
  views,
  transitions: { driver: 'gsap', duration: '700ms', ease: 'expo.out' }
})

With a bundler

There is no global, so hand the library to the driver:

import { gsap } from 'gsap'
import Zumly, { gsapDriver } from 'zumly'

const app = new Zumly({
  mount: '.canvas',
  initialView: 'home',
  views,
  transitions: { driver: gsapDriver(gsap), duration: '700ms' }
})

Easing

• A CSS easing ('ease-in-out', 'cubic-bezier(.2,.8,.2,1)') gives the same curve as the default driver, so switching drivers does not change the feel.
• Anything else goes to GSAP untouched: 'power3.inOut', 'expo.out', 'back.out(1.4)'.
• stagger (in ms) delays each layer behind the current one; each layer keeps its own curve.

What it animates

• If GSAP is missing, Zumly warns once in the console and keeps navigating without animation.
• In a hidden tab, where GSAP stops getting frames, each transition still finishes on time.

Wrapping it

A driver is a function, so you can wrap one:

const animated = gsapDriver(gsap)

transitions: {
  driver: (spec, onComplete) => {
    console.log(spec.type)          // 'zoomIn', 'zoomOut' or 'lateral'
    animated(spec, onComplete)
  }
}

The full contract is in Write your own driver.

Things to know

• Zumly owns transform on the views during a zoom. Do not tween the same views from your own GSAP code at that moment.
• Background effects work the same with every driver; animateEffects: false applies them at once, which is smoother with heavy views.