Nougat Predominant Middleware
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

circlr

3.1.1 • Public • Published

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

License

MIT

Install

npm i circlr

DownloadsWeekly Downloads

747

Version

3.1.1

License

MIT

Last publish

Collaborators

  • avatar