Rendered at 21:59:58 GMT+0000 (Coordinated Universal Time) with Cloudflare Workers.
porphyra 3 hours 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) on Chrome/149.0.7827.155 on Linux.
chao- 2 hours ago [-]
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.
sebular 3 hours ago [-]
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 :(
chrismorgan 5 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.
dag11 2 hours ago [-]
You can achieve that with a background-image, because you can stack multiple gradients.
Since this problem bothers me every time I see it on the web, I put together a quick example:
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.
if you use it i'd love to hear how it goes and if you have any feedback.
nailer 1 hours ago [-]
Doesn't seem to work in Chrome 147.0.7727.137 or Edge 149.0.4022.69.
Clicking the different options and then scrolling horizontally or vertically does not change any behaviour, appearance or animation.
My understanding is that something should change in the occluded elements that are partially outside the scroll area.
holistio 2 hours ago [-]
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!
franky47 2 hours ago [-]
Might want to set `overscroll-behavior: contain;` on those scroll areas, having the whole page move up and down (or worse, navigating Back when scrolling left) isn't great UX.
This is extremely laggy on my computer. It may not be a top-end gaming supercomputer but it's no slouch either.
esperent 4 hours ago [-]
It's fine on my phone, Brave Android. Maybe it doesn't work on Firefox?
sheept 5 hours ago [-]
It might be related to the liquid glass imitation in the color scheme picker
bduffany 4 hours 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.
nok22kon 2 hours ago [-]
maybe you dont have GPU acceleration in your browser. that glass thing looks like its using complex blur effects
4 hours ago [-]
maxjustus 5 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!
Etheryte 37 minutes ago [-]
Unfortunately it seems completely bugged out on mobile Safari.
ptak 5 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.
There is something very wrong on chrome mac, for me at least.
I mouse over the horizontal section and everything starts blinking and jittering wildly, then disappears. Vertical section has same issue.
jstanley 6 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 5 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 6 hours ago [-]
This has a frame drop issue on Chrome Version 149.0.7827.156. It isn't close to smooth on my browser.
Stitch4223 4 hours 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 3 hours 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 (e: and works with JS disabled, which is cool)
Stitch4223 2 hours ago [-]
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.
I have gpu enabled in google chrome (verified by visiting chrome://gpu) on Chrome/149.0.7827.155 on Linux.
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.
I was really hoping to see what the "melt" effect looked like :(
Since this problem bothers me every time I see it on the web, I put together a quick example:
https://jsfiddle.net/ng7hmuxd
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.
Clicking the different options and then scrolling horizontally or vertically does not change any behaviour, appearance or animation.
My understanding is that something should change in the occluded elements that are partially outside the scroll area.
edit: the scrubber split animation is dope too!
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
There are still other issues though. The performance of this page feels pretty bad in general.
I mouse over the horizontal section and everything starts blinking and jittering wildly, then disappears. Vertical section has same issue.
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.
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)
arrow keys also seem to work fine but you have to click-to-focus first.