Scrolltrigger - Stop / Play full height videos - TikTok Style

[deys]

So.. I'm creating a TikTok clone with React. 

The videos have a full height, and it is scrolled in a div. 

So it will be something like this: 

<div className='appVideos'> 
	<div className='videoPlayer'>VIDEO CONTENT IS HERE(the <video> tag, title sidebar and etc..)</div>
	<div className='videoPlayer'>VIDEO CONTENT IS HERE(the <video> tag, title sidebar and etc..)</div>
</div>

Now I want to add scrolltrigger on every video, so when the user goes from 1st to 2nd video the 1st is paused the second starts and vice versa.
I tried it like this:
 

   useEffect(() => {
      for (const video of document.querySelectorAll(".videoPlayer")) {
         console.log(video);
         ScrollTrigger.create({
            trigger: video,
            onEnter: () => video.play(),
            onEnterBack: () => video.play(),
            onLeave: () => video.pause(),
            onLeaveBack: () => video.pause(),
         });
      }
   }, []);

But no luck. It did not work. Is there a way to do this with ScrollTrigger? I want the outcome to be same ashttps://www.tiktok.com (mobile view)

[akapowl]

 

Welcome to the forums @deys

 

You might just have to set the scroller in your ScrollTriggers to whatever element it is you are scrolling in (if it is not the body).

 

Let us know if that helps. If it doesn't, a minimal demo showing your problem would be very appreciated and most likley also neccessary to get to the gist of why it's not working on your end. Hope this helps, though.

 

See the Pen 492510a24046490f5f9d7d815a115ed8 by akapowl (@akapowl) on CodePen