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!


HTML for this example

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

jQuery for this example

      totalFrames: 30,
      imagePrefix: 'test',
      fps: 24,

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")

Comments (0)

E-mail (Will not appear online)
To prevent automated Bots form spamming, please enter the text you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
This comment form is powered by GentleSource Comment Script. It can be included in PHP or HTML files and allows visitors to leave comments on the website.