https://github.com/mariuslundgard/pannable

A low-level abstraction for dealing with input on a pannable scale. Ideal for animated, swipeable carousels.
https://github.com/mariuslundgard/pannable

Last synced: 2 days ago
JSON representation

A low-level abstraction for dealing with input on a pannable scale. Ideal for animated, swipeable carousels.

• Host: GitHub
• URL: https://github.com/mariuslundgard/pannable
• Owner: mariuslundgard
• Created: 2015-12-08T09:00:37.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-02-19T14:31:02.000Z (over 7 years ago)
• Last Synced: 2024-11-02T03:03:15.660Z (6 days ago)
• Language: JavaScript
• Homepage:
• Size: 18.6 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# pannable

Manage gesture input on a pannable scale, designed as a utility abstraction for

swiping carousel interfaces.

## Installation

```sh

npm install pannable

```

## Example

```js

import {createPannableRange} from 'pannable'

const carousel = createPannableRange()

const carouselEl = document.querySelector('.carousel')

const diffHandlers = {

  show ([index]) {

    carouselEl.childNodes[index].style.display = 'none'

  },

  hide ([index]) {

    carouselEl.childNodes[index].style.display = 'block'

  },

  translate ([index, offset]) {

    carouselEl.childNodes[index].style.transform = (

      `translate3d(0, ${offset * 100}%, 0)`

    )

  }

}

// Add a render handler

carousel.onRender((diffs) => {

  diffs.forEach(([type, ...args]) => diffHandlers[type](args))

})

carouselEl.addEventListener('touchstart', (e) => {

  const touch = e.touches[0]

  carousel.panStart(touch.clientY)

})

window.addEventListener('touchmove', (e) => {

  const touch = e.touches[0]

  carousel.panTo(touch.clientY)

})

window.addEventListener('touchend', (e) => {

  carousel.panStop()

})

```