https://github.com/hparton/zoetrope

🐎 Provides a clean API for defining javascript animations using requestAnimationFrame
https://github.com/hparton/zoetrope

1kb animation animation-es6 chainable-functions es6

Last synced: 3 months ago
JSON representation

🐎 Provides a clean API for defining javascript animations using requestAnimationFrame

• Host: GitHub
• URL: https://github.com/hparton/zoetrope
• Owner: hparton
• License: mit
• Created: 2017-03-07T12:28:22.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-09-20T22:41:15.000Z (about 7 years ago)
• Last Synced: 2024-07-28T13:08:32.540Z (4 months ago)
• Topics: 1kb, animation, animation-es6, chainable-functions, es6
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/zoetrope
• Size: 70.3 KB
• Stars: 27
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        




  

  

  

  



## Introduction

Zoetrope provides a clean API for defining basic javascript animations using requestAnimationFrame. It should be very familiar if you have ever used `jQuery.animate()` progress events. But Zeotrope is dependency free, has a small file size (less than 2KB gzipped) and is much more performant.

It doesn't come with any animations out of the box, it's just a tiny helper so you can say:


`Do x every frame for x seconds with x easing`

If you are looking for a full animation framework i recommend [Anime.js](https://github.com/juliangarnier/anime) or [GSAP](https://greensock.com/)

## Browser Support

If `requestAnimationFrame` isn't available, Zoetrope will polyfill rAF using setTimeout(). Using the implimentation by [Paul Irish](https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/)

| [](http://godban.github.io/browsers-support-badges/)IE / Edge | [](http://godban.github.io/browsers-support-badges/)Firefox | [](http://godban.github.io/browsers-support-badges/)Chrome | [](http://godban.github.io/browsers-support-badges/)Safari |

| :-------: | :-------: | :-------: | :-------: |

| IE9+ | ✓| ✓| ✓

## Installation

### Using npm

```sh

$ npm install zoetrope --save

```

### Using Yarn

```sh

$ yarn add zoetrope

```

## Example



```js

import Zoetrope from 'zoetrope'

// Animating DOM elements, but this could easily be a canvas animation.

let $container = document.querySelector('.animation')

let $leftCircle = document.querySelector('.circle--left')

let $rightCircle = document.querySelector('.circle--right')

// Lots of nice easings can be found in this thread: https://gist.github.com/gre/1650294

let easeInOutCubic = t => { return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1 }

// Define what our animation should do each tick, all we need is the current progress.

let spin = progress => {

  // translation

  let percentage = progress * 300

  // rotation

  let rotation = 360 * progress

  $leftCircle.style.transform = `translateX(${percentage}%) rotate(${rotation}deg)`

  $rightCircle.style.transform = `translateX(-${percentage}%) rotate(${rotation}deg)`

  $container.style.transform = `translate(-50%, -50%) rotate(${rotation}deg)`

}

// Define our animation.

let animation = new Zoetrope({

  duration: 3500,

  onTick: spin,

  onStart: () => {

    console.log('Started!')

  },

  easing: easeInOutCubic

})

// Add extra event listeners.

animation.on('complete', () => {

  console.log('Done!')

})

// Start the animation looping, with a 500ms delay inbetween each loop

animation.loop(500)

```

## Setup

```js

import Zoetrope from 'zoetrope'

let anim = new Zoetrope()

```

## API

#### play

Start the animation

```js

anim.play()

```

#### reverse

Start the animation in reverse

```js

anim.reverse()

```

#### pause

Pause the animation but keep the RAF running so it can be resumed.

```js

anim.pause()

```

#### resume

Resume the animation if it was paused, otherwise it does nothing.

```js

anim.resume()

```

#### stop

Stop the animation, cannot be resumed as it destroys the current instance of RAF.

```js

anim.stop()

```

#### loop(delay)

Loop the animation forwards then backwards with an optional delay inbetween.

```js

// Play the animation forwards, wait 200ms then play it backwards and repeat forever.

anim.loop(200)

```

#### duration(duration)

Set the duration of the animation in ms.

```js

// On creation

anim = new Zoetrope({

  duration: 5000

})

// Or later

anim.duration(5000)

```

#### easing(easingFunc)

Set a function to determine easing for the animation, if this is not called the animation will just use easeOutQuint easing.

```js

// Define your own, only accepts one value of current time

// More available here: https://gist.github.com/gre/1650294

let easeInCubic = t => { return t*t*t }

// On creation

anim = new Zoetrope({

  easing: easeInCubic

})

// Or later

anim.easing(easeInCubic)

```

#### debug

Log a shallow copy of the current state

```js

let anim = new Zoetrope({

  duration: 300

})

anim.debug() // logs: {duration: 300, easing: easeOutQuart, ...}

    .duration(2000)

    .debug() // logs: {duration: 2000, easing: easeOutQuart, ...}

```

## Events

#### 'start'

Fired on the first frame of the animation

#### 'tick'

Fired on each RAF update of the animation.


**Returns:** progress - *Eased value between 0 - 1*

#### 'complete'

Fired when the animation has finished running.


## License

Zoetrope is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).