scrollbounce

➡ 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

• Inspired by the "BouncyLayout" library for iOS
• This library is targeted towards touch devices and won't have any effect on desktop.