KushalTanna
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by KushalTanna
-
-
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: LINKScreen 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.
- 2
-
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
Next.js 13 and GSAP: Issues with Animations Using Experimental appDir
in GSAP
Posted
Thanks for the solution.
I was not aware about gsap.context and useLayoutEffect. Now every animations are rendering as expected. Thanks a bunch.!