Nightmarish Pawnshop Mystic
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

scrollbounce

0.0.5 • Public • Published

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

Keywords

none

Install

npm i scrollbounce

DownloadsWeekly Downloads

4

Version

0.0.5

License

ISC

Unpacked Size

968 kB

Total Files

15

Last publish

Collaborators

  • avatar