Scrub on scroll
The term "scrub" originates from video playback, where moving your finger or cursor over a timeline slider (like on YouTube) lets you navigate through frames one by one. Essentially, it’s the process of jumping frame-by-frame through a sequence.
In Maglr, it is a powerful feature that allows you to create interactive, scroll-driven animations using videos, slideshows, Lottie animations, and native Maglr components.
Compatible elements
- Videos (with proper formatting)
- Lottie animations
- Slideshows
- Counters
- Gauges
- Progress bars
Configurable settings
There are several settings for the scrub on scroll effect.
1. Scroll distance
You can set the scroll distance in two ways:
- Viewport: Distance is determined by start and end values relative to the viewport
- Custom: Distance is set to a specific length in pixels
2. Trigger position
Choose what point of the group or element (top, middle, or bottom) triggers the scrubbing effect when it crosses the viewport threshold.
3. Smoothing options
Smoothing determines the fluidity of transitions between frames:
- None: Direct frame-to-frame transitions
- Fast: Quick response to scroll input with minimal smoothing
- Slow: Slower response and more gradual transitions between frames
Video formatting requirements
To use videos with scrub on scroll, they must be properly formatted. Please read our article on how to prepare your video for scrub on scroll.
Technical limitations
Keep these limitations in mind when implementing scrub on scroll:
- Can only be used with an uploaded video file, meaning a YouTube or Vimeo video is not compatible.
- Only works on longpage scenes, because fullscreen scenes are not scrollable. On mobile devices, fullscreen scenes automatically convert to longreads, making scrub on scroll available.
- Performance may vary based on content complexity and device capabilities. Consider keeping an eye on the page performance overview.
Troubleshooting
If you encounter issues:
- Verify your content is properly formatted, especially for videos
- Check that the scroll distance is appropriate for your frame count
- Test different smoothing settings if animations appear jerky
- Test if problems occur only on certain browsers and devices
Updated on: 08/09/2025