fadable
fadable copied to clipboard
Published
20 hours ago •
fromtheoutfit
fromtheoutfit
Fade in elements as they move into view, at both the bottom and top of the viewport.
Fadable
Fade in elements as they move into view, at both the bottom and top of the viewport.
Demo
https://theoutfit-fadable.netlify.app/
How to Implement
- Install it:
npm i @theoutfit/fadable --save - Import it:
import fadable from '@theoutfit/fadable' - Call it:
fadable() - Class it: add a class of
fadableto any element
Configuration
| Property | Type | Default | Description |
|---|---|---|---|
initialScale |
number | 0.95 | Initial scale (from 0 - 1) |
transitionDuration |
number | 0.75 | Transition speed (in seconds) |
edgeDistance |
number | 40 | Transition runs at this distance from viewport edges (in pixels) |
For example:
fadable({
initialScale: 0.50,
transitionDuration: 1.5,
edgeDistance: 80
})
License
Fadable is available under the MIT license.
Metadata
16
Stars
3
Forks
Watchers
Owner
fromtheoutfit
Metadata
Fade in elements as they move into view, at both the bottom and top of the viewport.