Make printable linear zoetropes of animations with javascript
See it in action, here
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. Just drag the images on to the demo.
You can import/require it in webpack/browserify/etc:
npm i animillusion
now you can do this:
const animillusion = require('animillusion')or you can point to the js file in your HTML:
<script src="http://konsumer.js.org/animillusion/animillusion.min.js"></script>All your frames should be images, of the same dimensions.
// get 2 image URLS for the slotted image, and the slots:
const images = animillusion([
'image1.png',
'image2.png',
'image3.png',
'image4.png'
])The demo is also made with react, if you want an example of that.