Viscosity

🐝 Demo 🐝

Makes an element react slower to scrolling,
like it was put into honey.

npm install --save scroll-viscosity

yarn add scroll-viscosity

import viscosity from 'scroll-viscosity'

const element = document.querySelector('#viscosity')

// with an element
let instance = viscosity(element)

// with an object
let instance = viscosity({
  element,
  easing: 0.2,
})

// with a selector
let instance = viscosity('#viscosity')

Options

Available when initializing with an object

| Name | type | Default | Description | | ------ | --------- | ------- | ---------------------------------------------------- | | easing | {Number} | 0.3 | How fast the element comes back in place | | wacky | {Boolean} | false | Gives the element a random easing between .1 and .25 |

Hooks

instance.destroy() // remove everything related to viscosity
instance.init() // only needed after destroy() has been called
instance.restart() // restarts the application
instance.toggle() // either runs init() or destroy(), respectively

Todo:

• ~~Handle inline elements (calc correct w/h)~~
• ~~Don't reposition elements that's out of view~~
• ~~MutationObserver for elements entering the dom~~
• ~~Make everything event/cb based~~
• ~~Better padding/margin handling~~
• Create bookmarklet for easier testing/it's cool

Known bugs:

• slight displacement of content that comes after a row of inline-block subjects. (not prio)
• existing advanced transforms gets placed wrong (skew/rotate)
• when element changes 'display', it isn't updated (out of scope?)