inView Reveals

Motion.inView() triggers animations when elements enter a scrollable viewport — zero scroll event listeners.

animation ds-anim-inview

Usage

// Motion.inView(element, callback, options)
// callback fires when element enters the root viewport.
// Supports custom root for scrollable containers.

Motion.inView(el, ({ target }) => {
    Motion.animate(target, { opacity:[0,1], x:[-40,0] }, { duration:0.5 })
})

// With custom root (scrollable container):
Motion.inView(el, callback, {
    root: scrollContainer,
    margin: '-10% 0px',
})