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.