artboard-deluxe

Artboard Deluxe - Mouse and touch friendly artboard library

Demo - Docs - NPM

• Use mouse, touch or wheel to pan, drag, scroll or zoom
• Smooth/momentum scrolling, animations, scroll velocity
• Works with a DOM element or HTML canvas (2D, WebGL)
• Plugins for rendering scrollbars, overview or additional interactions
• Plugin for adding keyboard shortcuts (Arrow, Page Up/Down, Ctrl+0, etc.)

Usage

npm install --save artboard-deluxe

Minimal Example

<div id="root">
  <div id="artboard">Hello World!</div>
</div>

<style>
  #root {
    position: relative;
    width: 500px;
    height: 500px;
  }

  #artboard {
    background: white;
  }
</style>

<script>
  import { createArtboard, mouse, wheel, raf, dom } from 'artboard-deluxe'

  const artboard = createArtboard(document.getElementById('root'), [
    dom({
      element: document.getElementById('artboard'),
    }),
    mouse(),
    wheel(),
    raf(),
  ])
</script>