Fix video until finishes

[luda]

Hi! Previously I asked how to play a video depending on the scroll and I already achieve that. 

Now I have been trying to fix the container video on the 100vh until the video finishes. Here I show a video of how my actual project works.

 

https://drive.google.com/file/d/11VPRgnHDnNvbSBtCdrrXMg4pgutD5zqg/view?usp=sharing

 

The solution that I want only works only when I scroll backward. When I scroll from top to bottom and the markers cross each other, the container disappears. And also the container joins the one below

 

I also recreate the project in the Stackbitz link

https://stackblitz.com/edit/react-ymjgyj?file=src/App.js

 

[Rodrigo]

Hi,

 

You're not using GSAP Context, so you are officially another victim of React's Strict Mode double effect call

https://greensock.com/docs/v3/GSAP/gsap.context()

 

This seems to work the way you intend:

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: container.current,
        start: 'top top',
        end: 'bottom top',
        scrub: true,
        markers: true,
        pin: container.current,
        pinSpacing: false,
      },
    });

    video.current.onloadedmetadata = function () {
      tl.to(video.current, { currentTime: video.current.duration });
    };
  });
  return () => ctx.revert();
}, []);

You can read more about it here:

 

Hopefully this helps.

Happy Tweening!

[luda]

Thank you very much! I’m happy for already being a victim of Strict Mode😂. 

[GreenSock]

There have been many, many victims. Ha. You're in good company. And it's not just the GSAP community that's getting bitten. It's all over. But yeah, gsap.context() is your new best friend in React.