peschaefer

Here is a StackBlitz showing my issue: https://react-5ax6wp.stackblitz.io

I am making a react website that has a video element that is snapped to when it comes into frame. When it is snapped to, it takes up the full screen as expected. However, when the user scrolls back up, it snaps to the top of the element. Is there a way I can make it only snap to the element and not out of it? I would like the user to be able to freely scroll up without it being scroll jacked, and only have it snap when the user is scrolling down. Here is my code: import React, { useRef, useEffect } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import Backpack from "./Kipling Seoul Backpack - Stop Motion (2).mp4" gsap.registerPlugin(ScrollTrigger); const VideoSection: React.FC = () => { const videoRef = useRef<HTMLVideoElement>(null); const sectionRef = useRef<HTMLDivElement>(null); useEffect(() => { const video = videoRef.current; const section = sectionRef.current; gsap.to(section, { scrollTrigger: { trigger: section, start: "top center", end: "center center", snap: 1, markers: true, onEnter: () => { // @ts-ignore video.play(); }, onLeaveBack: () => { // @ts-ignore video.currentTime = 0; // @ts-ignore video.pause(); }, }, }); }, []); return ( <div className="video-section" ref={sectionRef}> <video ref={videoRef} src={Backpack} muted loop preload="auto" ></video> </div> ); }; export default VideoSection;