A long awaited effect that unlocks new creative possibilities: the scrub on scroll effect is here. Upgrade your scrollytelling pages with frame-by-frame animation on components directly tied to user scrolling.

What is "scrubbing"?

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. While videos are a classic example, scrubbing applies just as well to vector animations (like Lottie), slideshows, counters, gauges and bars.

Introducing the “scrub on scroll” effect in Maglr Pro

In Maglr, we’ve adapted the concept of scrubbing into "scrub on scroll." It is in the name: you use scrolling to move through the frames of an element. As you scroll down or up, the component’s frames progress or rewind accordingly, creating an interactive experience tied to user scroll behaviour.

How it works

Check out the course video right here (and say hi to our new host, Ben!) or read a summary of the "scrub on scroll" effect below.

The scrub on scroll effect can be applied to several Maglr elements:

• Lottie components
• Slideshows
• Counters, gauges, and bars
• Videos (note: requires special formatting in order to be used with scrub on scroll)

Each of these components contain multiple frames, making them eligible for scrubbing beyond just video.

Within the scrub on scroll settings, you can control:

• Scroll distance: How far users need to scroll to move through the entire sequence of frames, determined in pixels or relative to viewport height
• Trigger points: The point where scrubbing begins relative to the element’s position (top, middle, or bottom)
• Smoothing: Easing to soften the animation’s responsiveness to scrolling, adjustable between fast or slow or none at all.

1. Scroll distance based on viewport or pixel value

Start by choosing the starting point relative to the viewport. Then decide whether the scrub distance should also determined by the height of viewport or by a custom pixel value.

2. Trigger points

You can specify which part of the element triggers the scrubbing effect (top, middle, or bottom). When that part crosses the chosen viewport threshold, scrubbing will start. The concept is the same as trigger settings in scroll-based animations. Check out our update on trigger positions for scroll animations earlier this year.

3. Smoothing

Smoothing is optional but recommended for a polished experience. When enabled, the scrubbing animation eases in and out, meaning it smooths out the flow from frame to frame. You’ll find a noticeable difference especially with trackpads. You can pick between "fast" or "slow" smoothing depending on your preference.

4. On-canvas scroll indicator

When the element is set to a custom scroll distance, you’ll see an indicator line on the canvas representing how far scrubbing spans. This helps visualize the scrub range.

Limitations of scrub on scroll

A quick heads-up: scrub on scroll only works on longpage scenes, because… well, you can’t scroll on a fullscreen scene. On mobile, fullscreen scenes automatically convert to longreads, meaning scrub on scroll is available there, even if it’s not on desktop.

What new design inspiration does this bring?

Scrub on scroll unlocks new creative possibilities for designers, for example:

• Dynamic photo collages with subtle frame-by-frame movement
• Scrollable data timelines where numbers increment as users scroll
• Storytelling pages combining scrubbed elements with sticky positioning for immersive product showcases

Got other exciting ideas? Share them with us at info@maglr.com or via chat!