Back to Pack GalleryMotion Pack 16 · Workflow
Media scrub
While scrubbing a timeline, keep frame, time marker, and progress track in sync.
Motion · 01
Arrival pattern00:09 / 01:20
Build a media-scrub preview: while a user drags a native range timeline, continuously update the playhead, time label, and progress fill in the frame. Keep the current frame after dragging and avoid decorative looping.
Motion rules
Frame, time, and track must update from the same progress value.
Reduced motion
Keep drag and content in sync while omitting transitions inside the frame.
Implementation
Copy HTML, CSS, and the JavaScript required for behavior together.