Zumly with Motion

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 uses Motion (motion.dev) and you want its easings, including cubic-bezier arrays.
• You want to hook into each transition from that library, for logging or to run another animation alongside.

With a script tag

Load Motion before Zumly and name the driver:

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

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

With a bundler

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

import { animate } from 'motion'
import Zumly, { motionDriver } from 'zumly'

const app = new Zumly({
  mount: '.canvas',
  initialView: 'home',
  views,
  transitions: { driver: motionDriver({ animate }), 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 Motion untouched: 'easeOut', 'backInOut', [0.2, 0.8, 0.2, 1].
• stagger (in ms) delays each layer behind the current one; each layer keeps its own curve.
• Targets Motion 11 (motion.dev). Older Popmotion releases have a different API.

What it animates

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

Wrapping it

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

const animated = motionDriver({ animate })

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 Motion code at that moment.
• Background effects work the same with every driver; animateEffects: false applies them at once, which is smoother with heavy views.