https://github.com/aholachek/scrollbounce

Add a subtle bounce effect on mobile when the user scrolls (WIP)
https://github.com/aholachek/scrollbounce

animation mobile-web scroll spring

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/aholachek/scrollbounce
• Owner: aholachek
• Created: 2019-10-22T14:15:55.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T06:26:49.000Z (about 2 years ago)
• Last Synced: 2024-10-12T05:47:35.767Z (2 months ago)
• Topics: animation, mobile-web, scroll, spring
• Language: JavaScript
• Homepage:
• Size: 1.05 MB
• Stars: 17
• Watchers: 2
• Forks: 3
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# scrollbounce

[![Minified & Gzipped size](https://badgen.net/bundlephobia/minzip/scrollbounce)](https://bundlephobia.com/result?p=scrollbounce)

[![npm version](https://badgen.net/npm/v/scrollbounce)](https://npmjs.org/package/scrollbounce "View this project on npm")







[➡ Live demo on CodeSandbox](https://codesandbox.io/s/scrollbounce-demo-ofxn8)

## Quickstart

`npm install scrollbounce`

or

`yarn add scrollbounce`

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

```html



  


  


  




```


### 2. Init the animation:

```js

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.

```js

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 ](https://github.com/roberthein/BouncyLayout)

- This library is targeted towards touch devices and won't have any effect on desktop.