Articles on: The editor

Scrub on scroll


The term "scrub" comes from video playback, where dragging along a timeline moves through a video frame by frame. Scrub on scroll applies this to an element on your page: its playback follows the visitor's scroll position instead of playing on its own.


Compatible elements


Scrub on scroll works on these elements:


  • Video (uploaded video files; not YouTube or Vimeo)
  • Slideshow
  • Lottie animation
  • Counter
  • Bar
  • Gauge
  • Diagram
  • Before/after slider


Groups and other element types don't have the Scrub on scroll setting.


Turning on scrub on scroll


To turn on scrub on scroll for an element:


  1. Select the element on the canvas.
  2. In the right panel, open the Element tab.
  3. Open the Settings tab (the wrench icon, first in the row of icons).
  4. Switch on Scrub on scroll.
  5. Choose Viewport or Custom.
  6. Set Start and End (with Viewport), or Start and Length (with Custom).
  7. Choose a Smooth option.


The Scrub on scroll setting is greyed out when the scene type isn't Longpage, or when the element is a YouTube or Vimeo video.


Scrub on scroll settings


Once Scrub on scroll is switched on, these settings appear from top to bottom.


Viewport or Custom


The Viewport / Custom switch decides how the scrub on scroll range is measured:


  • Viewport: scrub on scroll runs between two points on the screen, set with Start and End.
  • Custom: scrub on scroll begins at Start and lasts for a set number of pixels of scrolling, set with Length.


Start and End


Start sets where scrub on scroll begins and End sets where it finishes. Each one has two parts:


  • A percentage: a horizontal line on the screen, from 0% (bottom of the screen) to 100% (top of the screen).
  • Top, Center or Bottom: the part of the element that has to reach that line.


By default, Start is 0% with Bottom and End is 100% with Top. Scrub on scroll then begins when the element's bottom edge enters at the bottom of the screen, and finishes when its top edge reaches the top of the screen.


Content with many frames needs a longer scroll range for visitors to see each change: move Start and End further apart, or use a higher Length.


Length


With Custom selected, End is replaced by Length: the number of pixels of scrolling that scrub on scroll lasts after the element reaches the Start line.


Smooth


Smooth sets how closely the element follows the scroll:


  • None: direct frame-to-frame transitions. This is the default.
  • Fast: quick response to scrolling, with minimal smoothing.
  • Slow: slower response, with more gradual transitions between frames.


Video requirements


Use an uploaded video file. YouTube and Vimeo videos can't be used with scrub on scroll. The uploaded video must be an MP4 file with H.264 encoding. Phone videos are often H.265 (HEVC) and need to be re-encoded first.


The video must also stay within these limits:


  • Length: 60 seconds or less.
  • File size: 50 MB or less.
  • Resolution: no more than 1920 × 1080 pixels in total (width × height), so a portrait video of 1080 × 1920 also works.


If a video is over any of these limits, scrub on scroll is switched off for it. The editor preview shows "Encoding failed" on the video. Visitors on the live page see no message, but the video doesn't scrub.


For how to prepare a video, see Preparing your video for scrub on scroll.


Limitations


  • Scrub on scroll only works when the scene type is Longpage. On mobile, scenes use the Longpage scene type by default, so scrub on scroll is available there unless the scene type for mobile is set to something else.
  • On components (Lottie animation, Counter, Bar, Gauge and Before/after slider), scrub on scroll overrides the component's own animation settings, such as autostart and loop. Visitors also can't drag a Before/after slider while scrub on scroll is on.
  • Performance depends on the content and the visitor's device. Check the page performance overview.


Troubleshooting


  • The setting is greyed out: set the scene type to Longpage, or replace a YouTube or Vimeo video with an uploaded video file.
  • The preview shows "Encoding failed" on a video: the video is longer than 60 seconds, larger than 50 MB, or has more than 1920 × 1080 pixels in total. Prepare a version within these limits, upload it, and select it in the video's Video field. See Preparing your video for scrub on scroll.
  • A video plays choppily instead of scrubbing: check that it's an MP4 file with H.264 encoding. Re-encode H.265 (HEVC) videos, such as phone footage, before uploading.
  • The element jumps between frames: give it a longer scroll range. Move Start and End further apart, or increase Length.
  • The movement feels abrupt: set Smooth to Fast or Slow.


Frequently asked questions


Why is Scrub on scroll greyed out?


The Scrub on scroll setting is greyed out when the scene type isn't Longpage, or when the element is a YouTube or Vimeo video. Change the scene type to Longpage, or use an uploaded video file instead.


Can I use scrub on scroll with a YouTube or Vimeo video?


No. YouTube and Vimeo videos can't be used with scrub on scroll. Use an uploaded video file instead. It must be an MP4 file with H.264 encoding, 60 seconds or less, 50 MB or less, and 1920 × 1080 pixels or less in total. See Preparing your video for scrub on scroll.


Why does my video say "Encoding failed" in the preview?


"Encoding failed" means the uploaded video is over one of the scrub on scroll limits: 60 seconds, 50 MB or 1920 × 1080 pixels in total. Scrub on scroll is switched off for that video, so it won't scrub on the live page. Prepare a version within the limits, upload it, and select it in the video's Video field. See Preparing your video for scrub on scroll.


Does scrub on scroll work on mobile?


Yes. On mobile, scenes use the Longpage scene type by default, so scrub on scroll works there unless the scene type for mobile is set to something else.


Why can't visitors drag my Before/after slider?


When scrub on scroll is on, scrolling controls the Before/after slider, so visitors can't drag it. Switch off Scrub on scroll on the slider to make it draggable again, provided Allow User Interaction is on in the slider's settings.

Updated on: 14/10/2026