Jump to content
Search Community

Scroll to play: scrollTrigger video scrub in NextJS.

KushalTanna test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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.

Link to comment
Share on other sites

Hi,

 

I couldn't tell you about why the video playback is better with a specific compression, is far beyond my knowledge. Maybe this thread could shed some light in that:

 

As for your example I noticed a few things. You're not cleaning up in your useEffect hook, also you're not passing a dependencies array to it(it will call on every re-render, real bad for UX and performance). Finally you're not importing and registering ScrollTrigger, plus in Next you have to use the UMD modules, so you have to import GSAP from the dist folder.

 

Here is a fork of your example that seems to work the way you expect:

https://stackblitz.com/edit/nextjs-hfdw9j?file=pages%2Findex.js,pages%2F_app.js

 

Hopefully this clear things up. Let us know if you have more questions.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

  • Solution
19 hours ago, KushalTanna said:

After some research, I discovered that GSAP requires certain FFmpeg codec to animate videos.

Just to clarify, GSAP has no such requirement. Think of GSAP like a high-speed property manipulator. It doesn't care what the thing is that it's animating. It has no idea about any video codecs whatsoever. 

 

The problem you're describing sounds like the nature of video codecs and keyframe spacing. It is critically important that you encode the video properly if you want to be able to scrub smoothly. Most video codecs have keyframes every X number of frames, and then inbetween those it only records the changes from the previous frame (to minimize file size). It's optimized to only play forward. So if you encode the video when keyframes every 120 frames, for example, what happens if you try to scrub to frame 57? That's not a keyframe. It's a lot of work for the computer to back up to the closest keyframe earlier, and then calculate all the changes on each frame since. It's terrible for scrubbing smoothly. But if you encode your video with a keyframe literally on EVERY frame, then it'll be able to scrub incredibly smoothly (but you'll have a much bigger video file). 

 

In short, this has absolutely nothing to do with GSAP or ScrollTrigger - it's purely a video encoding thing. At least that's my best guess based on your description. Encode your video with the keyframes spaced tightly and you should be okay. Or just use an image sequence and <canvas>. 

 

It looks like you didn't import or register ScrollTrigger, and like Rodrigo said you've gotta do proper cleanup - here's a fork that seems to work: 

https://stackblitz.com/edit/nextjs-cyzezn?file=pages%2Findex.js

 

Good luck!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...