Animation (Motion)

// Motion is available globally as window.Motion in all showcase previews.
// Vendor: /static/motion.min.js (motion v10 UMD build, 24 KB)

// Basic animate: (targets, keyframes, options)
Motion.animate('#el', {opacity:[0,1], y:[8,0]}, {duration:0.3, easing:'ease-out'})

// From Datastar event
data-on:click="Motion.animate(el, {scale:[0.95,1]}, {duration:0.15}); $open=true"

// Stagger — offset each animation start
Motion.animate('.list-item', {opacity:[0,1], x:[-12,0]},
    {duration:0.35, delay: Motion.stagger(0.06)})

// Timeline — sequence with offsets
Motion.timeline([
    ['.a', {opacity:[0,1]}, {duration:0.2}],
    ['.b', {opacity:[0,1]}, {duration:0.2, at:'-0.1'}],
    ['.c', {opacity:[0,1]}, {duration:0.2, at:'-0.1'}],
])

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

// Number counter
Motion.animate(el, {}, {duration:1.5,
    onUpdate: p => el.textContent = Math.round(p * 9420).toLocaleString()
})