Motion and gestures

The code

const bubble = name => `<div class="z-view big" data-title="${name}"><h2>${name}</h2><p>Swipe left, pinch<br>or scroll to go back.</p></div>`

const app = new Zumly({
  mount: '.canvas',
  initialView: 'deep',
  views: {
    deep: `<div class="z-view deep" data-title="The deep">
             <p>Pick a bubble</p>
             <div class="bubbles">
               <div class="zoom-me bubble" data-to="one">1</div>
               <div class="zoom-me bubble" data-to="two" data-with-duration="1.6s">2</div>
               <div class="zoom-me bubble" data-to="three">3</div>
             </div>
           </div>`,
    one: bubble('One'),
    two: bubble('Two, slowly'),
    three: bubble('Three')
  },
  transitions: {
    duration: '900ms',
    ease: 'cubic-bezier(.2,.8,.2,1)',
    effects: ['blur(3px) brightness(.6)', 'blur(8px) brightness(.3)'],
    hideTrigger: 'fade'
  },
  // Zoom-out follows the trackpad, a swipe or a pinch as it moves
  gestures: { follow: true, threshold: 0.4 },
  inputs: { pinch: true },
  lateralNav: false
})

// The gesture's progress, from 0 to 1
const meter = document.querySelector('.meter')
app.on('zoomOutProgress', ({ phase, progress }) => {
  meter.style.width = phase === 'end' ? '0' : progress * 100 + '%'
})
app.init()

Transitions

• duration and ease set the timing; effects are CSS filters for the two views behind the current one. blur() is the expensive one: on large, busy views it drops frames while they move, so prefer brightness() and saturate() there (the showcases do), or set animateEffects: false.
• hideTrigger: 'fade' crossfades the trigger into the new view.
• Any trigger can override them: data-with-duration, data-with-ease, data-with-effects.
• With prefers-reduced-motion, transitions are instant.

Gestures

• gestures: { follow: true } makes the trackpad, a swipe and a pinch move the views as they go. Releasing past threshold finishes the zoom-out; otherwise everything returns.
• inputs: { pinch: true } adds closing two fingers. It is off by default because it competes with page zoom.
• zoomOutProgress reports the progress from 0 to 1, so your own controls can follow along.

Drivers

The driver is the engine that animates the transforms. The default is CSS. 'waapi' uses Web Animations; 'gsap', 'anime' and 'motion' use those libraries; and a function is your own. They all follow the same curve, so you can switch without retuning.

transitions: { driver: 'gsap', ease: 'power3.inOut' }

GSAP · Anime.js · Motion · Write your own