"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>
</>
);
}
