Scroll Progress

Motion.scroll() links animation progress to page scroll position. Zero event listeners, zero JS overhead.

animation ds-anim-scroll

Usage

// Scroll-linked animation — progress 0→1 as element scrolls through viewport
Motion.scroll(
    Motion.animate('#progress-bar', { scaleX: [0, 1] }, { duration: 1 }),
    { source: document.documentElement }  // whole page scroll
)

// Scroll-triggered with inView
Motion.inView('.section', ({ target }) => {
    return Motion.animate(target,
        { opacity: [0,1], y: [30,0] },
        { duration: 0.5 }
    )
})

// Scroll speed — reads scrollY to drive value
window.addEventListener('scroll', () => {
    const pct = scrollY / (document.body.scrollHeight - innerHeight)
    Motion.animate('#indicator', { scaleX: pct }, { duration: 0 })
})