/scrollbounce

Add a subtle bounce effect on mobile when the user scrolls (WIP)

Primary LanguageJavaScript

scrollbounce

Minified & Gzipped size npm version

scroll example

➡ Live demo on CodeSandbox

Quickstart

npm install scrollbounce

or

yarn add scrollbounce

1. Give animated elements unique data-bounce-id attributes:

<ul>
  <li data-bounce-id="1"></li>
  <li data-bounce-id="2"></li>
  <li data-bounce-id="3"></li>
</ul>

2. Init the animation:

import bounce from 'scrollbounce'

const stopBounce = bounce()

// if you want to remove the effect later:
stopBounce()

Options

The default effect is pretty subtle. To crank it up you can pass in an effectMultiplier option.

bounce({ effectMultiplier: 3 })

Coming soon

  • Improved edge case handling
  • Performance optimizations
  • More spring customization
  • Support horizontal scroll

Details