Scroll Video buggy when scrolling up on Firefox

If I view the scroll-video example here: Scroll Video - Bricksforge – The Bricks Tools that feel native and scroll back up on Firefox browser, the video is lagging and not even remotely smooth (even on private window without add-ons). On Chrome browser, everything is working as intended.

Windows 11
Firefox 116.0.3 (newest)

I just looked at it in FF on a Mac and seems to work okay fwiw.

It does indeed look good when scrolling down, but not if you are scrolling back to the top on Windows here.

can confirm on win11 using Firefox 116.0.3 (64-bit), scrolling back it seems to be skipping frames, stop motion kinda style haha

Here is a thread on the gsap forum with a solution. Haven’t tested it but might be worth looking into and applying the fix in a future update, seems to have something to do with encoding and/or fps → GSAP Scrolltrigger video scrubbing on scroll laggy/choppy in Firefox (Svelte issue?) - GSAP - GreenSock

For the Scroll Video element, we are using the ScrollyVideo Library: Do you notice the same on their example website? If no, can you try to include your video there and check again? (There is a input field where you can put your video url).

my bad, I assumed it’s all gsap :smiley: I’ve tried the example site in FF and it works fine on my end so it’s probably the video itself somehow.

Whereby I don’t exclude that GSAP plays a role there, if SmoothScroller or even ScrollTrigger is used. Who knows :smiley:

Actually, the video isn’t fluid on when scrolling down and back up :expressionless:. It’s even worse…
Btw: The hardware does not limit my browser’s performance. Guess it’s the library itself then.

Any chance you can provide the video you’re trying to use? Without it, it will be hard to try n figure it out :wink:

This issue on github suggests it’s fixable by re-encoding the video to set the frame distance to 1 → Why it's laggy when is scroll up · Issue #36 · dkaoster/scrolly-video · GitHub

1 Like

I’m always writing about the demo examples…

Got a screen-record here:

Hmm – strange. Cannot reproduce this on my macs. Will try on Windows later. :thinking:

Anyway – this library is technically awesome and its really handy to use a video to create scroll video sequences, but it also brings some disadvantages. Also, I noticed some issues if the video has a parent with limiting boundaries.

If this library not fits your requirements, you can wait a bit. I plan to include an Image Sequence functionality as well (splitting your video into multiple images). Also, this method will give you a lot more flexibility in design.

ahhh ok my bad, I’ve just tested the following in FF:

  1. scrollyvideo website → works fine just no scroll smoothing
  2. bricksforge example site → very laggy when scrolling back up
  3. scrollyvideo website with bricksforge video → laggy af in any direction haha

screen recording here → Dropbox - scrollvid.mp4 - Simplify your life

Also I did another test with a video of my own and it’s definitely not as laggy as the video from the BF site:

Finally one last test using my video on the bricksforge demo site in FF. I feel like scrolling back up is a little less smooth than scrolling down but by far not as choppy:

So in conclusion, I still think it’s gotta be something about encoding / framerate / compression / etc. of the video itself, I guess the library needs the video to have been exported in a certain way for it to work, which unfortunately they don’t really document (unless I didn’t look for it well enough).

Hi there,

Can you perhaps share how you achieved this? I have been struggling and there is no clear documentation that shows how this is done.

It would be much appreciated

Sure thing but I’m not sure where exactly you’re stuck :wink:

To activate the scroll video element, go here:

docs about it are here → Scroll Video – Bricksforge Docs

if you’ve already got it all implemented but your video is choppy or whatever, please share a link and give us some more details about the issues you’re facing (choppy video in ff, video won’t do X, etc.) :slight_smile:

1 Like