https://github.com/tobua/overflow-scroll-fade
Fade effect for scrollable elements with overflow.
https://github.com/tobua/overflow-scroll-fade
Last synced: about 2 months ago
JSON representation
Fade effect for scrollable elements with overflow.
- Host: GitHub
- URL: https://github.com/tobua/overflow-scroll-fade
- Owner: tobua
- Created: 2024-03-06T21:45:52.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-08T17:46:50.000Z (10 months ago)
- Last Synced: 2025-03-26T03:41:40.628Z (2 months ago)
- Language: TypeScript
- Homepage: https://tobua.github.io/overflow-scroll-fade/
- Size: 688 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# overflow-scroll-fade
Add a gradient-based dynamic fade effect to elements with scrollable overflow.
- ⚛️ React JSX based
- 🔄 Works with either horizontal or vertical overflow
- ❗ Requires the [ScrollTimeline](https://caniuse.com/mdn-api_scrolltimeline) API
- Currently works in Chrome, Edge and Opera
- ⚠️ Published as TypeScript and JSX see [this post on 𝕏](https://twitter.com/matthiasgiger/status/1766443368567971946) for the reasoning
> [!NOTE]
> This library is a much simpler successor to [indicate](https://github.com/tobua/indicate) which has less restrictions and more features but uses older and more performance intensive techniques.
## Usage
```tsx
import { Scroll } from 'overflow-scroll-fade'
const MyScroll = () => (
overflow-scroll-fade
overflow-scroll-fade
)
```