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.