Tw-fade: pure CSS scroll-driven edge masking

porphyra•3 minutes ago

What's edge masking and what am I looking at? I clicked through several of the options and I don't see any difference. There just seems to be a really basic gradient shadow.

I have gpu enabled in google chrome (verified by visiting chrome://gpu).

chrismorgan•about 2 hours ago

The fade affects scroll bars, which is quite unpleasant (and arguably catastrophic if you have two-dimensional scrolling). The traditional background-image technique avoided this by sitting inside the scroll area. I don’t think you can achieve that with mask, without an additional element. But I think it might be worth that extra element.

petekp•3 days ago

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.

Hugsbox•about 2 hours ago

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

esperent•about 1 hour ago

It's fine on my phone, Brave Android. Maybe it doesn't work on Firefox?

sheept•about 2 hours ago

It might be related to the liquid glass imitation in the color scheme picker

bduffany•about 1 hour ago

I think you're right. Performance profile shows lots of long spans relating to that element, and deleting that element makes the page scroll much more smoothly.

There are still other issues though. The performance of this page feels pretty bad in general.

Stitch4223•about 1 hour ago

What is happening here and why is it special? The site itself does show, but does not tell (which in itself is somewhat refreshing).

lelandfe•23 minutes ago

This is an effect that is widely used but is generally done with JS.

The effect indicates to users who may not have scroll bars enabled that a box can be scrolled. The fade should be removed when a box can’t be scrolled in that direction.

CSS effects tend (tend) to be faster and conceptually is a better place for effects anyway.

thebiblelover7•about 1 hour ago

How it works: https://github.com/petekp/tw-fade#how-it-works

maxjustus•about 2 hours ago

I also love the pure CSS parallax effect of the "tw-fade" title shadow using multiple spans with different styles that fade in and out based on scroll position. Very clever!

jstanley•about 3 hours ago

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.

RyanOD•about 2 hours ago

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?

rtrigoso•about 3 hours ago

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

ptak•about 2 hours ago

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

rpastuszak•about 1 hour ago

Might be useful: https://untested.sonnet.io/notes/natural-gradients-in-css/

NooneAtAll3•about 3 hours ago

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

c-hendricks•about 2 hours ago

I don't think that would be an issue of this CSS, that's just normal `overflow: auto` behaviour.

k33n•about 3 hours ago

pgdown works for me (firefox on linux)

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

Tw-fade: pure CSS scroll-driven edge masking

⚡ Community Insights

Discussion (19 Comments)Read Original on HackerNews