Jump to content
GreenSock

amcaw

GSAP Scrolltrigger video scrubbing on scroll laggy/choppy in Firefox (Svelte issue?)

Go to solution Solved by AdventurousDeveloper,

Recommended Posts

Hi everyone,

 

I'm not sure if my problem is strictly GSAP related... but here it is. I'm using GSAP and Scrolltrigger to play video on scroll. I know that encoding is super important so I used ffmpeg settings from the codepen at the end of this post.

 

But I'm still having issues with Firefox : video is laggy while scrolling. Even with this video provided in the original codepen. It happens only in Firefox though. Chrome and Safari are fine (and Edge is ok-ish).

 

I'm using Svelte to build my page so here is a Repl to show how I did it. Note that everything is working fine in every browser in the Repl. The problem shows up when the app is built locally with npm run dev and in production with npm run build).

 

Is there a way to improve things so video would be smooth in Firefox too ? I see nothing in the console.

 

(Video encoding, Svelte, no codepen of my own... I'm might be off topic here. Sorry about that. But still any help would be much appreciated !)

 

EDIT : I tried to create a classic index.html file with the HTML/CSS/JS from the codepen below and I still have issues while the index.html file is online...

 

 

See the Pen 9e810322d70c306de2d18237d0cb2d78 by shshaw (@shshaw) on CodePen

Link to comment
Share on other sites

Heya!

 

Yeah, I'm not really sure what I can offer you for this one. Maybe someone else has input? You're right that this is a little out of scope for the forums though - so just managing expectations here. 

Link to comment
Share on other sites

Indeed, thanks for your kind reply though. If anyone know what's happening... Is it possible that a codepen works fine but not the same code in production ?

  • Like 1
Link to comment
Share on other sites

Hey @amcaw,

 

I had the same issue with a previous project using the codepen code example you provided.

 

What solved the issue for me was the encoding of the video. In the codepen example you posted, the video used was encoded using ffmpeg - https://ffmpeg.org/. You need to run this via command line using the settings in the commented out section:

 

// ffmpeg -i ~/Downloads/Toshiba\ video/original.mov -movflags faststart -vcodec libx264 -crf 23 -g 1 -pix_fmt yuv420p output.mp4
// ffmpeg -i ~/Downloads/Toshiba\ video/original.mov -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output_960.mp4

 I had to fiddle around with the frame values (-crf 23 & -crf 20) to what best suited my video.

 

Hope this gives you a bit of direction 👍

 

Cheers

 

  • Like 3
Link to comment
Share on other sites

  • Solution
Cassie
This post was recognized by Cassie!

"🥳"

AdventurousDeveloper was awarded the badge 'Valuable Content'

Hey @amcaw,

 

No worries at all!

 

I couldn't help myself and dug out my old project files for a bit of a refresher. I've put together a CodePen to show how I got everything working. Hopefully this will get you going and also help other people with video scrubbing and ScrollTrigger. I've tested this across Safari, iOS Chrome, FireFox and Edge, but adjustments may still needed to be made.

 

Just a couple of notes from what I found out on my way getting this to work:

  • I struggled with large video sizes and page load, I had to find a happy medium of video quality and file size.
  • H.264 is widely available, namely H.265 (better in that it compresses more for the same quality, or gives higher quality for the same size). To use it, replace the libx264 codec with libx265, and push the compression lever further by increasing the CRF value — add, say, 4 or 6, since a reasonable range for H.265 may be 24 to 30. Note that lower CRF values correspond to higher bitrates, and hence produce higher quality videos.
  • I contemplated using images instead, see the GSAP AirPods 

 

See the Pen XWZxLyO by AdventurousDeveloper (@AdventurousDeveloper) on CodePen

 

What made the magic happen was setting scrollTrigger onUpdate progress to half the FPS of the video to allow the entire video to be scrubbed for the duration of the scroll. Playing around with the end value will extend the length of how long/short you need the video to scrub for.

 

No doubt there may be a more efficient of doing this, so maybe someone else could fine tune further.  

 

Hope this helps 👍

 

  • Like 6
Link to comment
Share on other sites

Wow, thanks so much for getting back to me with all this ! This is gold and it definitely helps a lot. I can see that you even found a solution for disappearing video on Safari, that's awesome. Have a nice day 🤩

 

  • Like 2
Link to comment
Share on other sites

This is a blessed thread, so glad someone came through for you!

  • Like 2
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.
×