Framenimate is a small javascript plugin to create simple sequential frames animations. It was born out os personal necessity of creating a sequential animation out of a series of photos taken using de sequential shooting function from digital cameras.

Demos in the wild

• Demo

Basic Usage

To start a new frame animation is as simples as eeting the framenimate attribute to the wrapper tag where your images/frame are contained:

        <figure framenimate >
            <img src="image-1.png">
            <img src="image-2.png">
            <img src="image-3.png">
            <img src="image-4.png">
            ...
        </figure>

To change the animation properties it's possibel to add some cutom rules to the framenimate attrubute:

        <figure framenimate="speed: 25" >
            <img src="image-1.png">
            <img src="image-2.png">
            <img src="image-3.png">
            <img src="image-4.png">
            ...
        </figure>

It is also possible to select the wrappers DOM node and create a new instance of animation for this target(s) through Javascript with new Framenimate:

          var element = document.querySelectorAll('.frames');
          var animation = new Framenimate(element, {
            speed: 400,
            smooth: true,
            smoothFactor: 0.5,
            reverse: true
          });

Todo

• Basic animattion controls
• Animate using sprites

License

Framenimate is released under the MIT license.