Video Scrolling not working

[RLM]

https://codesandbox.io/s/react-video-scrolling-forked-xntdvl?file=/src/App.js ---> code

Hi,

I am trying to make a video play through scrolling. Here the video is being played but the problem is that the video is playing after a while  I have stopped scrolling. Basically a lag I would say, but I want it to be smooth.

Pls, help me.

https://codesandbox.io/p/sandbox/react-next13-gsap-control-video-fd969p --> This has helped to write the code that I have written up until now for the video scrolling animation.

 

[Rodrigo]

Hi,

 

The problem could be video weight and compression. This is definitely not a GSAP related issue as it has been documented in these threads:

 

 

Hopefully the resources in those threads help.

Happy Tweening!

[RLM]

On 6/15/2023 at 9:53 PM, Rodrigo said:

Hi,

 

The problem could be video weight and compression. This is definitely not a GSAP related issue as it has been documented in these threads:

 

 

Hopefully the resources in those threads help.

Happy Tweening!

So I am finally getting a smooth playback of the video while scrolling.

https://codesandbox.io/s/react-video-scrolling-forked-xntdvl?file=/src/App.js ---> code

It would be really great if other people can also get access to read this thread. I am writing the steps below:

 

So this process will work for everybody, regardless of your processor. This method works on m1, so it must work on all Windows machines and earlier Intel MacBooks, this could also work on the new m2 chipset machines also. 

The pre-requisite is that you must have adobe premiere pro.

I have the 2022 version of adobe premiere pro
Warning: Your video should not be more than 10 seconds long if you want to have playback while scrolling using gsap scroll trigger plugin or else the result video file size will be very large. A Video of 2-3 seconds works the best.

Steps:

1. First bring your video on the premiere pro timeline. You can drag the video from whatever folder you have stored it in, into premiere pro

2. If you want some edits in your video, you can do it here. This is an optional step.

3. Go to the export tab. You can find the export tab on the top left.

4. Then click on the drop-down arrow next to the video tab and then click more.

5. Scroll down a bit then you can see the bitrate and keyframe distance options. Then make the value of the keyframe distance 1-5 ( 1 worked best for me ). Also then increase the bitrate value to 25-35 Mbps.

6. Now you can export and the use the exported file for your website development.

 

Now if you think like me, and you choose to compress the exported video file, then don't do it, because I guess the compressors change the bitrate and the keyframe distances of the video. So if you'll use the compressed video in your development, you will again face the scroll lag with your video.