Image Animator
I once worked on a site for an animated movie that required this low-res style image animation component. I figure if it was good enough for a high-traffic, webby-recognized site; it was good enough to share.
Weighing in at 2.2K (uncompressed), ImageAnimator has zero dependencies, with the exception of the DOM, so you can pretty much plug and play.
Install
npm i image-animator --save
or using yarn
yarn add image-animator
Note: If using a package manager (recommended) you will likely want to integrate w/ your own build tools. However, the dist
directory contains prebuilt versions of the project for easy inclusion in a web page.
Usage
Create a imageAnimator instance, by passing an opts object like so.
let imageAnimator = el: SOME_DOM_NODE_THAT_CONTAINS_IMAGES;
Valid options are
Object
(required)
el: The DOM node that contains the images that we will be using in the imageAnimator.
Accept a native JS element like document.getElementById('image-animator-image-sequence')
.
Number
(optional)
fps: The target frames per second of the imageAnimator animation
default value: 24
Number
(optional)
delay: Amount of time (in milliseconds) that should pass between retarting the imageAnimator sequence (only evaluated if isLooping
is set to true
)
default value: false
Boolean
(optional)
isLooping: Set to true
if the imageAnimator sequence should restart after finishing
default value: false
Number
(optional)
loops: The max number of times the imageAnimator sequece should restart
default value: null
Object
(optional)
onInit: Optional function that is called when the imageAnimator object is initialized.
Object
(optional)
onComplete: Optional function that is called when the imageAnimator object is done animating.
Examples
Check Here for more in-depth examples.
Consider the following.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="browserified-image-animator.min.js"></script>
</head>
<body>
<h1>imageAnimator example</h1>
<div id="image-animator-image-sequence">
<img src="img1.png" alt="some alt"/>
<img src="img2.png" alt="some alt"/>
<img src="img3.png" alt="some alt"/>
<img src="img4.png" alt="some alt"/>
<img src="img5.png" alt="some alt"/>
...
</div>
</body>
<script type="text/javascript">
(function(){
var imageAnimator = new imageAnimator({
el: document.getElementById('image-animator-image-sequence'),
isLooping: true,
fps: 30
});
})();
</script>
</html>
The JS bit above does three things
- Creates an instance of
imageAnimator
namedimageAnimator
and passes the the#image-animator-image-sequence
div as theel
property. - Sets the
isLooping
totrue
, so the image sequence will restart when it has completed - Sets the
fps
to30
frames per second.
Contributing
If you have a bug fix or feature proposal, submit a pull request with a clear description of the change, plus tests.
License
MIT © Joseph (Jos) Smith