Snap page when user stops scrolling

With a customizable configuration and a consistent cross browser behaviour

const snappy = new ScrollSnap(element, {
  snapDestinationX: '90%',
  timeout: 100,
  duration: 300,
}).bind(callback)

Complete control over the scroll behaviour

Manually bind and unbind the scrolling element, set a threshold, and fine-tune the animation.

const snappy = new ScrollSnap(element, {
  snapDestinationX: '90%',
  timeout: 100,
  duration: 300,
  threshold: 0.2,
  easing: (t: number) => (
    t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t   
  ),
})

function unbind() {
  console.log('element snapped')
  snappy.unbind()
}

// Only snap once
snappy.bind(unbind)

Check the code
Github

⁙ ⁙ ⁙

Play with the demo
CodeSandbox

Made by Luca Falasco