Skip to content

fromtheoutfit/fadable

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 

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.