circlr

circlr

Animation rotation via scroll, mouse and touch events

• Horizontal or vertical orientation
• Touch events support
• Scroll support
• Reverse and cyclic rotation

Install

npm install --save circlr

Usage

import circlr from 'circlr';

const el = document.querySelector('.container');

circlr(el)
  .scroll(true)
  .play()
  .on('show', n => {

  });

API

circlr(el)

Create rotation instance.

el

Type: string, element

Element.

.scroll(n)

n

Type: boolean

Rotation via scroll flag.

.vertical(n)

n

Type: boolean

Vertical orientation flag.

.reverse(n)

n

Type: boolean

Reverse rotation flag.

.cycle(n)

n

Type: boolean

Cyclic rotation flag, default true.

.start(n)

n

Type: number

Start frame, default 0.

.interval(ms)

n

Type: number

Playback interval, default 75 ms.

.play([n])

Start sequence playback.

n

Type: number

Frame number for playback to him or infinity playback if number in not specified.

.stop()

Stop playback.

.show(n)

Show specified frame.

n

Type: number

Frame number.

.prev()

Show previous frame.

.next()

Show next frame.

.unbind()

Unbind rotation events.

Events

• show, when frame is showed

Support

• Internet Explorer 9+
• Chrome
• Safari
• Firefox
• Opera

Related

• react-rotation - react rotation component

License

MIT