Jump to content
Search Community

Video Scrubbing - what are the best practices to avoid bad performance on slower connections

Nicola Peluchetti test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts



we've implemnted video scrubbing using gsap. The code is live at https://navee.com/ 

I'll post the relevant code here:

Video conversion:

  // ffmpeg -i ~/Downloads/Toshiba\ video/original.mov -movflags faststart
  // -vcodec libx264 -crf 23 -g 1 -pix_fmt yuv420p output.mp4 ffmpeg -i
  // ~/Downloads/Toshiba\ video/original.mov -vf scale=960:-1 -movflags
  // faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output_960.mp4

The html:


The javascript

  gsap.utils.toArray(".video-scrub").forEach((video) =>
    videoScrub(video, {
      scrollTrigger: {
        trigger: video,
        start: "center center",
        end: "+=6500",
        scrub: true,
        pin: true,
        onEnterBack: () => {
      onComplete: () => {
      onStart: () => {
      onReverseComplete: () => {
      // x: document.documentElement.clientWidth * 0.05,

  function videoScrub(video, vars) {
    video = gsap.utils.toArray(video)[0]; // in case selector text is fed in.
    let once = (el, event, fn) => {
        let onceFn = function () {
          el.removeEventListener(event, onceFn);
          fn.apply(this, arguments);
        el.addEventListener(event, onceFn);
        return onceFn;
      prepFunc = () => {
      prep = () => once(document.documentElement, "touchstart", prepFunc),
      src = video.currentSrc || video.src,
      tween = gsap.fromTo(
        { currentTime: 0 },
          paused: true,
          immediateRender: false,
          currentTime: video.duration || 1,
          ease: "none",
      resetTime = () =>
        (tween.vars.currentTime = video.duration || 1) && tween.invalidate();
    video.readyState ? resetTime() : once(video, "loadedmetadata", resetTime);
    return tween;

code was found it on the forum. The question is,as per in the title, how to improve performance on slower connections. We know that the filesize is big and it's a major offenders, should we turn down frame per seconds on mobile to make the video smaller?different codec?I am looking for general advice here, rather than for a full solution. 

Thanks in advance

Link to comment
Share on other sites

  • Solution

Yeah, if you want it to load faster on slow connections, that's going to be all about the video file (those are big). You can reduce the quality (bitrate) in the compression, and/or reduce the dimensions of the raw video. Those are the main things that contribute to file size. Keyframe placement is a factor too, but if you want to be able to scrub smoothly, you must have very frequent keyframes. 


We really try to keep these forums focused on GSAP-specific questions (see the forum guidelines) but hopefully this at least helps a little bit and gets you moving in a better direction. Good luck!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...