How to control video progress video with gsap + react/Nextjs 13

[Maxwell Alves]

I'm trying to replicate this example for React/NextJS. In this example, I changed the prop "scrub" from "true" to "2", and it worked exactly as I would have liked, where when you scroll the video moves forward or backward smoothly. I've been trying for days to do this in React, and it just doesn't work. Could some expert help me convert this code to React/nextjs?

My code is thi img:

See the Pen NWOmrxW by maxleon52 (@maxleon52) on CodePen

[Cassie]

Hi there, we don't have the resources to rewrite demos in different frameworks, but give our react guide article a read, give it a go and we'll happily take a look if it's not working still.

 

There are some starter templates in there to get you going
 

 

[Maxwell Alves]

Well, here's an explanation of some tests i did:

Link React(Create-React-App):
https://codesandbox.io/s/react-gsap-control-video-55jv75

 

Link React/Nextjs13:
https://codesandbox.io/p/sandbox/react-next13-gsap-control-video-fd969p

 

Link VanillaJS:

See the Pen vYVbvXX by maxleon52 (@maxleon52) on CodePen

 

I replicated the example in 3 ways, however, in NextJs, it doesn't work. Motive? I have no idea! No error appears on the console to debug the code. If anyone knows how to explain me, comment below, I will be grateful for your help. 
The steps used were:
1 - Install ffmep, See the doc at: https://ffmpeg.org/documentation.html;
2 - Do the conversion of the video, here is a command line example:

ffmpeg -i NAME_YOUR_VIDEO.mp4 -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p NAME_EXIT_YOUR_VIDEO.mp4
3 - Replicate the example code above. That's it.

PS: I didn't develop the code, I just found it at this
link:https://codepen.io/wisearts/full/ExZGrbZ
All the credits are his, I just adapted it to my need, with react and nextjs.

[Cassie]

Hey - so the link I provided earlier showed that you should be using context. Please try to read the content provided by people trying to help! 

 

https://greensock.com/react/#context

I've added context and it's working now. ✨

I'm not a react person though so If I were you I would spend some time checking up the correct way to handle playing and pausing video with React, as you can't just call pause on a ref. Maybe it's setNativeProps 🤷🏼‍♀️

Also similarly I doubt the way I've done the onloadedmetadata event is correct in React, so maybe check that up too. 

GSAP wise this is working a ok though, you just needed context to get around React 18's double call stuff.

https://codesandbox.io/s/react-gsap-control-video-forked-6sjmwn

[Maxwell Alves]

3 hours ago, Cassie said:

Hey - so the link I provided earlier showed that you should be using context. Please try to read the content provided by people trying to help! 

 

I've added context and it's working now. ✨

I'm not a react person though so If I were you I would spend some time checking up the correct way to handle playing and pausing video with React, as you can't just call pause on a ref. Maybe it's setNativeProps 🤷🏼‍♀️

Also similarly I doubt the way I've done the onloadedmetadata event is correct in React, so maybe check that up too. 

GSAP wise this is working a ok though, you just needed context to get around React 18's double call stuff.

https://codesandbox.io/s/react-gsap-control-video-forked-6sjmwn

I think you got it wrong. As I explained above, the only one that didn't work was NextJS. You applied the context in pure react, in this version, I had no problem either. As I mentioned, I did 3 tests, pure React (works), NextJS (Doesn't work), vanilla (works). However, I'll apply your context example to NextJS and return here.

[Maxwell Alves]

@Cassie I made your suggestion in the test with NextJS (13), when saving, the automatic rebuild, made the video work, but when I click "refresh" from the browser embedded in the codesandbox, the animation no longer works, that is, it only worked once turn. My suspicion is that it's something with NextJS, but honestly, I'm not sure, since I don't get any errors in the console.

https://codesandbox.io/p/sandbox/react-next13-gsap-control-video-fd969p

[Cassie]

This seems to work for me -

https://codesandbox.io/p/sandbox/react-next13-gsap-control-video-fd969p

[Maxwell Alves]

12 hours ago, Cassie said:

This seems to work for me -

https://codesandbox.io/p/sandbox/react-next13-gsap-control-video-fd969p

Not work, i open and the animation not work. Apply refresh and nothing

[Cassie]

Not sure how to help really as it's working for me.

These forums might not be the most helpful place though, you're not doing anything wrong GSAP-wise, as evidenced by the vanilla demo and the react demo that are working.

If I were you I would take this to the next discord community and see how they would approach it and if there's anything in your setup that you're missing.

https://nextjs.org/blog/discord

[Maxwell Alves]

Thanks! 

[Rodrigo]

Hi,

 

This seems related to some SSR issue. Cassie's example is working fine on a React App but your example is not and here is an error I'm getting in the console:

Warning: Extra attributes from the server: style
    at body

That's in your layout file:

<html lang="en">
  <body className={inter.className}>{children}</body>
</html>

If you remove that class from the body tag your example works as expected:

https://stackblitz.com/edit/nextjs-jfi5ws

 

Now, why Next is complaining about the style attribute on the body tag I have no idea 🤷‍♂️, as far as I can tell that should be valid HTML, unless I'm wrong about that.

 

Hopefully this helps.

Happy Tweening!

[Maxwell Alves]

@Rodrigo the structure of your project is a little different, you are using version 13, mine is 13.4.1 . Not sure if that would impact directly. About the mentioned error, I found it strange, because those lines were being used, which is nothing more than font import. And I also believe it has something to do with the SSR, but I'm already following the new recommendation on this one, which is to pass the "use client" flag. I see you got around this with a custom hook.

[RLM]

Hi,

I am also trying to make a scrolling animation with a video, on React 18.

I am also facing the lag on scrolling on Chrome, but the animation is working fine on Safari ( no video encoding done yet using FFmpeg )

The only issue I have right now is that ffmpeg does not support M1 laptops, and I am using M1 MacBook air. So do you have any other recommendations for the video encoding software.

( I tried running ffmpeg on my m1 laptop, but the software doesn't even runs properly. I though maybe Rosetta would be able to run ffmpeg )

 

Also if any GSAP experts @Cassie @Rodrigo have any idea how I can encode the video, hopefully without using ffmepg.

Thanks in advance!

Edited June 16, 2023 by RLM

[Rodrigo]

Hi @RLM,

 

Sorry to hear about the issues. You are welcome to post in different threads asking for advice from other users, just don't tag them directly.

 

Personally I have zero experience using ffmpeg and I'm not a Mac user so I can't help you with this. Also software compatibility is quite beyond the scope of these forums. We need to keep things focused on GSAP related issues. This is more a question for Stackoverflow/exchange or a dedicated ffmpeg forum/board/community.

 

One option (not a simple one though) you could explore is to install and run a windows virtual machine in your macbook and run ffmpeg there, but for what I understand that is quite a hassle.

 

Good luck with your project!

Happy Tweening!

[RLM]

25 minutes ago, Rodrigo said:

Hi @RLM,

 

Sorry to hear about the issues. You are welcome to post in different threads asking for advice from other users, just don't tag them directly.

 

Personally I have zero experience using ffmpeg and I'm not a Mac user so I can't help you with this. Also software compatibility is quite beyond the scope of these forums. We need to keep things focused on GSAP related issues. This is more a question for Stackoverflow/exchange or a dedicated ffmpeg forum/board/community.

 

One option (not a simple one though) you could explore is to install and run a windows virtual machine in your macbook and run ffmpeg there, but for what I understand that is quite a hassle.

 

Good luck with your project!

Happy Tweening!

Ok, I have removed the tag.

Plus yes running virtual machine would be very cumbersome, as only parallels support the arm chipsets and it is paid while other which are free, do not support arms chipsets : (.

 

But do you have any idea what type of encoding is done using ffmpeg? because I have found one encoder, which works fine on my laptop. So if I could know what type of encoding is done, I could then iterate the same thing on that encoder.

[Rodrigo]

Sorry, but I have no experience encoding videos. You'll have to try and test if it works and how the compression goes. Also keep in mind the factor of the keyframes as explained here:

Happy Tweening!