Video scroll React

[luda]

Hello friends,

I have been trying to play a video depending on the scroll that the user makes. I haven't found anything as a tutorial video. I have been trying some things that I had seen in this Forum. 

My question is that someone already achieved this type of animation on React? Most of the post in this forum is about Vanilla Javascript

 

If someone can help me I really appreciated 

I don't have code about gsap, I have been trying things but doesn't work and I finish in the same place, in this code:

 

import textVideo from "../assets/text.mp4";
import styles from "../styles/Video.module.css";

const Video = () => {

  return (
    <div>
      <video className={styles.textVideo} src={textVideo} muted autoPlay loop />
    </div>
  );
};

export default Video;

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[mvaneijgen]

We ask for a minimal demo because then anybody can directly jump into the code and try things. Even not working code in a demo is helpful, because that means we don't have to recreate your setup before we can start helping, so if you could create your not working setup in the  StackBlitz template for React that would greatly increase your chances of getting a answer to your question. 

[luda]

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

 

I tried to animate the video with the help of other posts in this forum but I didn't achieve it. 

My idea is that the video plays when the video is in the middle of the page and the user is not able to continue scrolling until the video finish

[Rodrigo]

Hi,

 

There are a few issues in your code. You're using the ref object instead of ref.current in this part of your code:

video.onloadedmetadata = function () {
  tl.to(
    video,
    { currentTime: video.duration, duration: () => tl.duration() },
    0
  );
};

In this case video is a ref, so you have to use video.current. On top of that you just copy/paste some code from a different example that is meant for a different situation. In the case of your example, you're not adding anything to the Timeline instance, hence it's duration when this code block runs is zero, so basically you're setting the duration of this particular tween to zero seconds.

 

This seems to work better:

video.current.onloadedmetadata = function () {
  tl.to(video.current, {
    currentTime: video.current.duration,
  }).play();
};

Also it seems to te a problem with the video you're using, at least for your example. I created a simple codepen to illustrate the issue since I'm getting a CORS issue with another video source:

See the Pen abRmemz by GreenSock (@GreenSock) on CodePen

 

As you can see nothing happens as you scroll down. If you comment out line 3  and uncomment line 2 of the HTML you'll see that the other video actually works as expected. You can check the threads mentioned here in order to get a better idea about the best practices to generate a video file for using it with ScrollTrigger.

 

Hopefully this helps.

Happy Tweening!