# Scrolling Video Scrubber

**URL:** <https://forums.realmacsoftware.com/t/scrolling-video-scrubber/52696>\
**Category:** Elements\
**Created:** [November 23, 2025, 6:32am UTC](https://forums.realmacsoftware.com/t/scrolling-video-scrubber/52696 "2025-11-23T06:32:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [November 23, 2025, 6:32am UTC](https://forums.realmacsoftware.com/t/scrolling-video-scrubber/52696/1 "2025-11-23T06:32:35Z")

</div>

Would be a nice addition to background videos in containers etc…

[Scrolling video scrubber demo page](https://www.doobox.co.uk/lab/video_scroll/)

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [November 23, 2025, 6:56am UTC](https://forums.realmacsoftware.com/t/scrolling-video-scrubber/52696/2 "2025-11-23T06:56:15Z")

</div>

You can do this today by basically adding an id = scrollvid to a container that has a background video. then add this script to the js section of the page code editor:

```javascript
document.addEventListener("DOMContentLoaded", () => {
  if (typeof gsap === "undefined" || typeof ScrollTrigger === "undefined") {
    console.error("GSAP or ScrollTrigger not loaded");
    return;
  }

  gsap.registerPlugin(ScrollTrigger);

  const container = document.getElementById("scrollvid");
  if (!container) {
    console.error("#scrollvid not found");
    return;
  }

  const video = container.querySelector("video");
  if (!video) {
    console.error("No <video> inside #scrollvid");
    return;
  }

  video.removeAttribute("autoplay");
  video.pause();
  video.currentTime = 0;

  video.addEventListener("play", () => video.pause());
  video.play = () => Promise.resolve();

  const setupScrollScrub = () => {
    const duration = video.duration;
    if (!Number.isFinite(duration) || duration <= 0) {
      console.error("Invalid video duration", duration);
      return;
    }

    const startTime = 0;
    const endTime = duration;

    video.currentTime = startTime;

    ScrollTrigger.getAll().forEach((st) => {
      if (st.vars && st.vars.trigger === container) {
        st.kill();
      }
    });

    gsap.fromTo(
      video,
      { currentTime: startTime },
      {
        currentTime: endTime,
        ease: "none",
        scrollTrigger: {
          trigger: container,
          start: "top bottom",
          end: "bottom top",
          scrub: 1
        }
      }
    );

    ScrollTrigger.refresh();
  };

  if (video.readyState >= 3) {
    setupScrollScrub();
  } else {
    video.addEventListener("canplay", setupScrollScrub, { once: true });
    video.addEventListener(
      "loadedmetadata",
      () => {
        if (video.readyState < 3) {
          console.warn("Falling back to loadedmetadata. Scrubbing may be less smooth.");
          setupScrollScrub();
        }
      },
      { once: true }
    );
  }
});

```

You could always change the id of teh container and also change it in the script (if needed).

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [November 23, 2025, 6:52pm UTC](https://forums.realmacsoftware.com/t/scrolling-video-scrubber/52696/3 "2025-11-23T18:52:34Z")

</div>

Oh that is very cool 🤩

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [November 23, 2025, 7:05pm UTC](https://forums.realmacsoftware.com/t/scrolling-video-scrubber/52696/4 "2025-11-23T19:05:32Z")

</div>

Safari does not like it so much. It works in Safari, but has a habit of sticking. It’s smooth and consistent in Chrome. But just a concept at the moment, it needs work.

But I know with some research and work it could be browser safe as its a widely used in web design.

---

<div class="post-metadata">

**Author:** ![MultiThemes](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/multithemes/32/25117_2.png) [@MultiThemes](https://forums.realmacsoftware.com/u/MultiThemes)\
**Post date:** [November 23, 2025, 9:47pm UTC](https://forums.realmacsoftware.com/t/scrolling-video-scrubber/52696/5 "2025-11-23T21:47:21Z")

</div>

> [@Doobox](#):
>
> Would be a nice addition

Nice Job! It’s truly fantastic, a very powerful creative tool. I also spent some time with it last year with HypePro, [here an example](https://www.multithemes.com/data/hype/scrollvideo/index.html), but unfortunately compatibility issues with browsers remain. 😪

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [November 23, 2025, 10:10pm UTC](https://forums.realmacsoftware.com/t/scrolling-video-scrubber/52696/6 "2025-11-23T22:10:00Z")

</div>

Also. please stop play of background video (in core components) in edit mode. It’s so so distracting.