https://github.com/konsumer/animillusion
Make printable linear zoetropes with javascript
https://github.com/konsumer/animillusion
Last synced: over 1 year ago
JSON representation
Make printable linear zoetropes with javascript
- Host: GitHub
- URL: https://github.com/konsumer/animillusion
- Owner: konsumer
- Created: 2013-11-16T16:05:56.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T08:40:58.000Z (over 3 years ago)
- Last Synced: 2025-02-28T14:56:39.138Z (over 1 year ago)
- Language: JavaScript
- Size: 15.6 MB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# animillusion
Make printable linear zoetropes of animations with javascript
See it in action, [here](http://konsumer.github.io/animillusion/)
This technique is called "linear zoetrope".
It tends to work well with less than 10 frames, but your animation may work with more, especially if you make it really big (in terms of pixels.) Sillouettes, especially in colors other than black work really well, even with many frames.
You can also print the images on paper/plastic, and it works pretty well.
If you'd like some nice animation examples, I put some [here](https://github.com/konsumer/animillusion/tree/master/demo/src/examples). Just drag the images on to the [demo](http://konsumer.github.io/animillusion/).
## installation
You can import/require it in webpack/browserify/etc:
```
npm i animillusion
```
now you can do this:
```js
const animillusion = require('animillusion')
```
or you can point to the js file in your HTML:
```html
```
## usage
All your frames should be images, of the same dimensions.
```js
// get 2 image URLS for the slotted image, and the slots:
const images = animillusion([
'image1.png',
'image2.png',
'image3.png',
'image4.png'
])
```
The [demo](demo/) is also made with react, if you want an example of that.