Articles on: The Pro editor

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


Best practice: When choosing scroll distance, consider your content's frame count. A longer scroll distance allows viewers to see frame-by-frame changes better.


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