Advanced Playgrounds
Interactive example
Events: onScroll
Live controls
onscroll play / pause
Drive a regular useAnime animation with native ScrollObserver method sync through the autoplay parameter.
Scroll the inner panel
Scroll until the yellow chip reaches the middle band
Spin
Leaving the zone pauses or reverses based on scroll direction
in view: false
direction: forward
observer: 0%
velocity: 0.00
animation: 0%
Progress0%
onscroll scrub
Use the official autoplay ScrollObserver path for exact playback-progress sync, so scroll distance scrubs frame by frame.
Scroll the inner panel
observer progress 0%
Start outside the container viewport
scrubbed
offset start 0offset end 0
Progress0%
onscroll callbacks
Observe direction-aware callbacks without linking an animation. Useful for React state, analytics, and progressive UI changes.
Scroll the inner panel
in view falseforward
Directional callbacks fire as the observed block crosses the center threshold
target
Scroll back up to trigger backward enter/leave callbacks
Recent Events
Scroll to populate callback events
Progress0%
onscroll smooth sync
Use numeric sync smoothing through autoplay to create less rigid, more physical scroll-linked playback.
Scroll the inner panel
Smooth sync eases the scrub instead of matching scroll instantly
smooth
progress 0%velocity 0.00
Sync Events
Scroll through the band to trigger sync lifecycle callbacks
Progress0%
onscroll horizontal axis
Track horizontal container scrolling with axis-specific observer progress and live scroll metrics.
Scroll sideways inside the panel
axis
x
observer
progress
scroll
metrics
horizontal target
progress 0%
scroll 0
distance 0
Progress0%