Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Tw-fade: pure CSS scroll-driven edge masking

pete.design

Post reply on HN
Print view View original

21–30 of 37 posts

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

#21

Post by lelandfe »

Stitch4223 wrote: post #17

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

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 (e: and works with JS disabled, which is cool)

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

#22

Post by porphyra »

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) on Chrome/149.0.7827.155 on Linux.

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

#23

Post by sebular »

porphyra wrote: post #22

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) on Chrome/149.0.7827.155 on Linux.

It took me forever to realize this, but I'm pretty sure the "options" ("ghost", "melt", "evanesce", and so on) aren't anything at all, just terms that are all adjacent to "fade" which can be selected for some reason. A search for those terms in the repo doesn't come up with anything.

I was really hoping to see what the "melt" effect looked like :(

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

#25

Post by holistio »

petekp wrote: post #2

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 sho…

I don't find tw-fade particularly useful for me right now, but clicked through your site and I have to say I really like your approach to things (stress-testing shimmers comes to mind), big kudos.

edit: the scrubber split animation is dope too!

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

#26

Post by nok22kon »

bduffany wrote: post #16
sheept wrote: post #12

Earlier quoted context omitted.

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

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.

maybe you dont have GPU acceleration in your browser. that glass thing looks like its using complex blur effects

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

#27

Post by chao- »

porphyra wrote: post #22

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) on Chrome/149.0.7827.155 on Linux.

I am also struggling to see what clicking any of the options in the demo changes. I don't consider myself advanced in design knowledge, but I'm pretty average in visual perception.

Perhaps some or all of them don't work in Firefox for Android, and I'm just seeing a fallback behavior that does work?

Edit: Just tested in Chrome desktop and Firefox desktop on Linux, still struggling to see a difference in any of the demo regions (which I assume are supposed to demo the option when selected?). Also scroll behavior is graphically laggy/jumpy in Chrome, but not Firefox.

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

#29

Post by Stitch4223 »

lelandfe wrote: post #21
Stitch4223 wrote: post #17

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

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 (e: and works with JS disabled, which is cool)

Ah, thanks! It looks like it only works if there is something partially shown. The fade color being the same as the background will just make it look like background when margins between scrollable objects are too wide. Good to know this exists.
Post reply on HN