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.

Thanks!

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

@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

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.

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: https://codepen.io/maxleon52/pen/vYVbvXX 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.

Thanks, i searched and got it. I saw several tests, I couldn't. I created a similar thread, though, focused on React with NextJS. I'll explain there, my experiments. Follow the link:

How to encode these formats into a video? I would like to do in a video of mine.

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? PS: The code pen is the exemplo that i try replicate. My code is thi img:

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:

@OSUblake it turns out that you can't know at which point on the screen this problem will happen. If you test the demo on Edger and Opera these rendering errors don't happen, I need to know, if I made the animations correctly, if the refs are correct. Because I honestly don't believe it's a code error, but in Chrome, as in other browsers that use webkit, it doesn't have this problem.

guys @GreenSock and @OSUblake, see the demo video in chrome; https://watch.screencastify.com/v/zMqEdjqMxDsXNkqdwWvS the code is on stackblitz platform, because codesandbox was crashing a lot. https://stackblitz.com/edit/nextjs-vluygx?file=pages/solucoes.tsx I apologize for having created another forum, however, I abandoned that one, as it was written in my native language, Portuguese, I didn't even realize when I did it.

@GreenSockplease add "/solucoes" to the url so you can see the animation running, detail, open it in a separate tab for a better view. see image:

Hey guys, why is my animation having a rendering problem? example: https://stackblitz.com/edit/nextjs-vluygx