Zumly with Anime.js

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 Anime.js (v4 or v3) and you want one animation engine and one set of ease names.
• You want to hook into each transition from that library, for logging or to run another animation alongside.

With a script tag

Load Anime.js before Zumly and name the driver:

<script src="https://cdn.jsdelivr.net/npm/animejs@4/dist/bundles/anime.umd.min.js"></script>
<script src="https://unpkg.com/zumly/dist/zumly.js"></script>

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

With a bundler

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

import * as anime from 'animejs'          // v4; for v3: import anime from 'animejs'
import Zumly, { animeDriver } from 'zumly'

const app = new Zumly({
  mount: '.canvas',
  initialView: 'home',
  views,
  transitions: { driver: animeDriver(anime), 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 Anime.js untouched: 'outExpo' (v4), 'easeOutExpo' (v3).
• stagger (in ms) delays each layer behind the current one; each layer keeps its own curve.
• Works with Anime.js v4 (animate) and v3 (anime()); the driver detects which one you pass.

What it animates

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

Wrapping it

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

const animated = animeDriver(anime)

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