KushalTanna

Thanks for the solution. I was not aware about gsap.context and useLayoutEffect. Now every animations are rendering as expected. Thanks a bunch.!

I am trying to create simple animations in Next.js 13 using experimental appDir, but I am encountering some issues with the animations. Specifically, when I use "fromTo()", the animation seems to play or render twice. On the other hand, when I use "from()", the animation disappears at the end of the GSAP timeline. I have searched for solutions on Google and our forum, but I couldn't find anything helpful. I have attached a screen recording below to illustrate the issue, and the link to the codesandbox where you can find my code. Code: LINK Screen recording: LINK I would greatly appreciate it if anyone could provide any insights or guidance on how to resolve this issue. Thank you and best regards.

Wow.. Got it. I missed many things in my code. Thanks for detailed explanation.

Hello GSAP community, I am excited to share my recent discovery of GSAP and the amazing examples I came across online. I was inspired to create something using GSAP and decided to make a simple video scrub effect that is controlled by user scrolling. I am using NextJS v13 as my react framework. However, I am encountering a few challenges along the way. When I tried to use a video source from one of the GSAP forum threads, it worked perfectly. However, when I tried to use other videos, they remained frozen on the page. After some research, I discovered that GSAP requires certain FFmpeg codec to animate videos. So, I tried using the following FFmpeg command to resolve the issue, but the video still remained frozen: ffmpeg -i videoplayback.mp4 -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output.mp4 To my surprise, uploading the ffmpeg converted video to my dropbox and using the link from it solved the problem, but I am still unsure of why this worked. I would greatly appreciate any suggestions on how to utilize a video that is available offline/locally available. Additionally, I set the position to fixed so that the user can scrub through the video and video can be at the same place. I even tried using "pin" property from gsap, but then video disappears. And even, when I try to change the CSS for the video frame, the video disappears. My goal is to have a placeholder text on the first div with a height of 100vh, and in the second div, the video that the user can scrub through to reach the third div, which will again be 100vh of placeholder text. I have shared my NextJS code on Stackblitz, which you can find here: [link to Stackblitz]. As a new user, I apologize for any silly mistakes in my code. Thank you in advance for your help and support.

Hey, I found this thread very helpful. I was wondering how it can be achieved in react.? I just started learning about gsap from youtube since last 2 days. They mainly cover basic things, I found the code little hard to wrap my head around. So i am not sure how to put this working example in react/nextJS[13]. Please someone can reproduce or help me any way to achieve similar effect in react.? Thanks and regards, Kushal