Scrolling Video Scrubber

Elements
1

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

Scrolling video scrubber demo page

1 Like
2

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:

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).

2 Likes
3

Oh that is very cool :star_struck:

4

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.

5

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, but unfortunately compatibility issues with browsers remain. :sleepy_face:

1 Like
6

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