controll video by scrolling

[OSs]

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;

[Cassie]

Hi there @OSs,

 

Please can you pop this into a minimal demo on codepen or codesandbox so we can take a look at it - thanks!