Scroller.js

Create responsive and pausable horizontally moving elements.
Use the main import for standard js, or import from dist/react for the included React component.

Installation

Install from the command line:

$ npm install @kezoponk/scroller

Install via package.json:

"@kezoponk/scroller": "1.1.5" 

Usage

| Option / Prop | Description and defaults | | --- | --- | | direction | left or right Default: left | | speed | Any number Turtle: 20 - Rabbit: 120Default: 20 | | animation | Animation type Default: linear | | delayBetweenAnimationsMS | Delay before starting next animation when last animation is finishedDefault: 0 | | finishAnimationBeforePause | Default: false |

Keep in mind eventlisteners to items in target div will get removed since cloneNode ignores them

Methods

These are available for access on the scroller instance/ref

• pause() Also triggered when mouse enters the target element
• unpause() Also triggered when mouse exits the target element
• restore() Restore target div to state before scroller - can't be undone

Example with standard JS

<div id="scrolldiv">
  <button>Example</button>
  <button>Political</button>
  <button>App</button>
  <button>Programming</button>
  <button>Program</button>
  <button>School</button>
</div>

new Scroller(document.getElementById('scrolldiv'), { direction: 'left', speed: 10 });

• Scroll to left
• Moving 1px every 10ms

Example with React

<Scroller direction="right" speed={100} animation="ease-in-out">
  <a href="/example"><button>Example</button></a>
  <a href="/political"><button>Political</button></a>
  <a href="/app"><button>App</button></a>
  <a href="/programming"><button>Programming</button></a>
  <a href="/program"><button>Program</button></a>
  <a href="/school"><button>School</button></a>
</Scroller>

• Scroll to right
• Moving 1px every 100ms
• Ease-in-out animation on each item