hi,
I want to add video to my Hero section and controll it wits ScrollTrigger, but I want to leave the hero section only if the video end (by scrolling to the end of the video ).
and this is my code :
import * as React from 'react';
import { useRef, useEffect } from 'react';
import { Flex, } from '@chakra-ui/react';
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export type HeroSectionProps = {};
const HeroSection: React.FC<HeroSectionProps> = (props) => {
const {} = props;
const IntroVideoRef = useRef(null);
const videoRef = useRef<HTMLVideoElement>(null);
useEffect(() => {
gsap.registerPlugin(ScrollTrigger);
if (videoRef.current) {
videoRef.current.currentTime = 0
ScrollTrigger.create({
trigger: IntroVideoRef.current,
scrub: true,
pin: IntroVideoRef.current,
start: 'center center',
end: 'bottom -100%"',
markers: true,
onUpdate: function(self) {
if(videoRef.current) {
let scrollPos = self.progress;
let videoDuration = videoRef.current.duration;
let videoCurrentTime = videoDuration * scrollPos;
if(videoCurrentTime) {
videoRef.current.currentTime = videoCurrentTime;
}
console.log(videoDuration, scrollPos, videoCurrentTime)
}
},
})
}
}, [IntroVideoRef, videoRef]);
return (
<Flex as="section" align="center" pos="relative" height="100Vh" >
<div className="intro" ref={IntroVideoRef}>
<video id="video" ref={videoRef} src="https://media.w3.org/2010/05/sintel/trailer.mp4" />
</div>
</Flex>
);
};
const MemoHeroSection = React.memo(HeroSection);
export default MemoHeroSection;
