jQuery Canimate Plugin



Download This Example

Leave a comment


If you've ever wanted to create an animation using a series of images for your website, but were forced to an alternative because you didn't want to deal with the constraints of the GIF filetype, like color limit and difficult-to-deal-with FPS controls, then Canimate is the solution.

With Canimate, you can take any series of images and, using the Canimate naming convention, have them animate at any speed. You can treat the element that holds the image just like any other, including giving it borders, dragging it, etc. Give it a try!


Demo


HTML for this example

<div class="canimation">
   <img src="images/second_folder/test0000.png"/>
</div>



jQuery for this example

$(document).ready(function(){
   $('.canimation').canimate({
      totalFrames: 30,
      imagePrefix: 'test',
      fps: 24,
      preload:true
   });
});


Naming convention and making Canimate work


Canimate uses the name of the image that is inside the element referenced in the jQuery canimate startup. Currently, the only naming convention supported is YourFrameName####.xxx. In other words, it uses a name specified by the user (defaults to "frame"), followed by four number characters, followed by a filetype. The reason for this is that many programs output frames in this manner. New versions will support more naming conventions.



All options


totalFrames : integer

The total number of frames used in the animation.



fps : Number

Frames per second of the animation. May not work over 70FPS



reload : Boolean

Determines whether the animate loads as it plays or loads before playing. Loading message is included.



loop : Boolean

Determines whether the animate loops or plays only once.



imagePrefix : String

Determines the string used first in the name of each image in the animation. See "Naming convention and making Canimate work" for more information. (ex: frame, in "frame0001.png")



filetype : String

Determines the string used for the filetype of each image in the animation. See "Naming convention and making Canimate work" for more information. (ex: png, in "frame0001.png")