fromtheoutfit/fadable

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

1. Install it: npm i @theoutfit/fadable --save
2. Import it: import fadable from '@theoutfit/fadable'
3. Call it: fadable()
4. Class it: add a class of fadable to 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.