How do play video smoothly on scroll, here the video is not playing smoothly

[Aldrin]

I want the video to play smoothly on scroll, here on my code pen demo it's not smooth, how do I make it better?

See the Pen RwqVYVV by aldrinbright (@aldrinbright) on CodePen.

[Rodrigo]

Hi,

 

There are many factors that affect video scrub with ScrollTrigger and none are actually related to either GSAP or ScrollTrigger.

 

Take a look at these threads:

 

 

 

 

 

Hopefully this helps.

Happy Tweening!

[jatin jain saraf]

 

"use client";

 

import { useEffect, useRef } from "react";

import ScrollTrigger from "gsap/ScrollTrigger";

import gsap from "gsap";

 

export default function Roadmap() {

let vidRef = useRef() as any;

gsap.registerPlugin(ScrollTrigger);

 

useEffect(() => {

let tl = gsap.timeline({

defaults: { duration: 1 },

scrollTrigger: {

trigger: "#story_video",

start: "top top",

end: "bottom+=600% bottom",

scrub: true,

pin: true,

// markers: true,

},

});

vidRef.onloadedmetadata = function () {

tl.fromTo(

vidRef,

{

currentTime: 0,

},

{

currentTime: vidRef?.duration,

}

);

};

});

 

return (

<>

<section

className="story-section w-full overflow-hidden"

id="story-section"

>

<div className="container">

<h2 className="story-title text-center text-white ff-orbitron-b mb-14 2xl:mb-[130px]">

STORY 2D - 3D

</h2>

</div>

 

<div className="h-screen relative" id="story_video">

<video

className="h-screen"

src="https://www.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fef-891e-ff2fc1c1bb58/videos/macpro_main_desktop.mp4?raw=1"

ref={(el) => (vidRef = el)}

></video>

</div>

</section>

</>

);

}

[jatin jain saraf]

Quote

"use client";

import { useEffect, useRef } from "react";
import ScrollTrigger from "gsap/ScrollTrigger";
import gsap from "gsap";

export default function Roadmap() {
  let vidRef = useRef() as any;
  gsap.registerPlugin(ScrollTrigger);

  useEffect(() => {
    let tl = gsap.timeline({
      defaults: { duration: 1 },
      scrollTrigger: {
        trigger: "#story_video",
        start: "top top",
        end: "bottom+=600% bottom",
        scrub: true,
        pin: true,
        // markers: true,
      },
    });
    vidRef.onloadedmetadata = function () {
      tl.fromTo(
        vidRef,
        {
          currentTime: 0,
        },
        {
          currentTime: vidRef?.duration,
        }
      );
    };
  });

  return (
    <>
      <section
        className="story-section w-full overflow-hidden"
        id="story-section"
      >
        <div className="container">
          <h2 className="story-title text-center text-white ff-orbitron-b mb-14 2xl:mb-[130px]">
            STORY 2D - 3D
          </h2>
        </div>

        <div className="h-screen relative" id="story_video">
          <video
            className="h-screen"
            src="https://www.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fef-891e-ff2fc1c1bb58/videos/macpro_main_desktop.mp4?raw=1"
            ref={(el) => (vidRef = el)}
          ></video>
        </div>
      </section>
    </>
  );
}

Video is not playing

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Rodrigo]

Hi @jatin jain saraf and welcome to the GreenSock forums!

 

A few things that should be noticed:

• It seems that you're working with NextJS. In the case of Next you have to impoer GSAP plugins from the UMD modules we have available in the dist folder, like this:

  import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; 

• You are incorrectly using the useRef() hook:

  useEffect(() => {
    let tl = gsap.timeline({
      defaults: { duration: 1 },
      scrollTrigger: {
        trigger: "#story_video",
        start: "top top",
        end: "bottom+=600% bottom",
        scrub: true,
        pin: true,
        // markers: true,
      },
    });
    vidRef.onloadedmetadata = function () {
      tl.fromTo(
        vidRef,
        {
          currentTime: 0,
        },
        {
          currentTime: vidRef?.duration,
        }
      );
    };
  });

  You are using vidRef, instead you should use vidRef.current:
  https://react.dev/reference/react/useRef

• You are not properly cleaning up your useEffect hook and you're not passing a dependencies array to it:
  https://react.dev/reference/react/useEffect

• When using GSAP in a React environment always use GSAP Context in order to do proper cleanup and avoid issues with useEffect and useLayoutEffect double calls that were introduced in Strict Mode in React 18. Check the resources in this page to learn how to correctly use GSAP in React environments:

Hopefully this helps.

Happy Tweening!