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)
