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

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

 

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

 

"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>

</>

);

}