3 ms·
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 scro
by petekp 3mo 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 https://pete.design/tw-fade
github: https://github.com/petekp/tw-fade https://github.com/petekp/tw-fade
npmjs: https://www.npmjs.com/package/tw-fade 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.
- holistio 3mo agoI 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!
- nailer 3mo agoDoesn'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.