Tw-fade: pure CSS scroll-driven edge masking

#1

Post by petekp » Mon, Jun 22, 2026, 3:12 PM UTC

Tw-fade: pure CSS scroll-driven edge masking
pete.design

Re: Tw-fade: pure CSS scroll-driven edge masking

#2

Post by petekp » Mon, Jun 22, 2026, 3:12 PM UTC

hey all, just released a plugin to scratch an itch. i'd been lazily adding linear gradients on the edges of scrollviews and animating them with JS based on scroll position. turns out you can do a lot better with pure CSS now by leveraging masking + the new CSS scroll animations API.

works in pretty much all browers excepting firefox which doesn't have CSS scroll animations yet, but the nightly version does, so it should be generally available soon.

demo site: https://pete.design/tw-fade

github: https://github.com/petekp/tw-fade

npmjs: https://www.npmjs.com/package/tw-fade

if you use it i'd love to hear how it goes and if you have any feedback.

Re: Tw-fade: pure CSS scroll-driven edge masking

#3

Post by jstanley » Thu, Jun 25, 2026, 4:10 PM UTC

FYI scrolling this page is slow as balls on my computer. Firefox on Ubuntu.

I don't know if this page is a demonstration of your plugin, I'm guessing yes but I can't see any masking going on, it seems to scroll just like a normal page but much more laggy.

EDIT: Oh I see in your comment now, it doesn't work in Firefox. My mistake.

Re: Tw-fade: pure CSS scroll-driven edge masking

#4

Post by rtrigoso » Thu, Jun 25, 2026, 4:20 PM UTC

jstanley wrote: post #3

FYI scrolling this page is slow as balls on my computer. Firefox on Ubuntu. I don't know if this page is a demonstration of your plugin, I'm guessing yes but I can't see any masking going on, it seems to scroll just like a normal page but much more laggy. EDIT: Oh I see in your comment now, it doesn't work in Firefox. My mistake.

This has a frame drop issue on Chrome Version 149.0.7827.156. It isn't close to smooth on my browser.

Re: Tw-fade: pure CSS scroll-driven edge masking

#5

Post by NooneAtAll3 » Thu, Jun 25, 2026, 4:29 PM UTC

arrow keys don't work, pgdown doesn't work

Re: Tw-fade: pure CSS scroll-driven edge masking

#6

Post by k33n » Thu, Jun 25, 2026, 4:31 PM UTC

NooneAtAll3 wrote: post #5

arrow keys don't work, pgdown doesn't work

pgdown works for me (firefox on linux)

arrow keys also seem to work fine but you have to click-to-focus first.

Re: Tw-fade: pure CSS scroll-driven edge masking

#7

Post by Hugsbox » Thu, Jun 25, 2026, 4:37 PM UTC

This is extremely laggy on my computer. It may not be a top-end gaming supercomputer but it's no slouch either.

Re: Tw-fade: pure CSS scroll-driven edge masking

#8

Post by ptak » Thu, Jun 25, 2026, 4:55 PM UTC

Neat! I'd much rather just copy-paste the CSS from the site though, would never install something like this as a package.

Re: Tw-fade: pure CSS scroll-driven edge masking

#9

Post by f8ght » Thu, Jun 25, 2026, 4:57 PM UTC

[dead]

Re: Tw-fade: pure CSS scroll-driven edge masking

#10

Post by RyanOD » Thu, Jun 25, 2026, 5:14 PM UTC

jstanley wrote: post #3

FYI scrolling this page is slow as balls on my computer. Firefox on Ubuntu. I don't know if this page is a demonstration of your plugin, I'm guessing yes but I can't see any masking going on, it seems to scroll just like a normal page but much more laggy. EDIT: Oh I see in your comment now, it doesn't work in Firefox. My mistake.

I was wondering the same thing and I'm in Chrome. The "Horizontal" and "Vertical" sections don't seem to do anything, but maybe I'm just not understanding what I should be looking for?