scrollbounce

Add a subtle bounce effect on mobile when the user scrolls

Usage no npm install needed!

<script type="module">
  import scrollbounce from 'https://cdn.skypack.dev/scrollbounce';
</script>

README

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