Kapi

A keyframing API for the HTML 5 canvas

A JavaScript framework by Jeremy Kahn

Latest stable release: 1.0.7. (Includes `kapi.tweens.js`)

NOTE: Kapi is no longer being developed. However, this library has been rewritten with a nearly identical API and improved feature set. The new version is being actively developed - check out Rekapi.

Kapi is a tool that helps you make fun animations on the web. It completely manages animation timing and provides a user-friendly API to define keyframe states. This page contains some demos that show what Kapi can do. Please follow the links above to see the API documentation. For a tutorial on how to get started with Kapi, please consult the README.

Kapi is free and open source software (MIT license). You are completely free to use, distribute, and modify the code. The Github repo contains all of the source files.

Here's the code that generated what you see above:

myKapi = kapi(document.getElementById('demo1'), {
	fps: 30,
	// Set up some basic styles for the canvas
	styles: {
		height: 	'400px',
		width: 		'500px',
		background: '#333'
	}
}).play(); // Start the animation

// The actor `circle` is defined in shapes.js
circle1 = myKapi.add(circle, {
	name: 	'circle1',
	x: 		70,
	y: 		70,
	radius: 50,
	color: 	'#00ffaa',
	easing: 'easeInOutQuint'
}).keyframe(0, {
	// Blank, defining keyframe zero as the same as the initial state
}).keyframe('3s', {
	x: 	300,
	y: 	300
}).keyframe('3.25s', {
	// Empty keyframes act as a "wait"
}).keyframe('6s', {
	x: 	'+=50',
	y: 	100
}).liveCopy('8s', 0);

More demos

Here's a demo of the type of animation that Kapi can help you make. View the source to see how it works!

The future is now!

Kapi is used in production sites as well:

CME Group 2010 Annual Report (Kapi animations can be found on the Financial Highlights and Financial Milestones pages)

More examples can be found in the docs, near the respective API documentation.

Helping out

This project needs help from the community to grow and be awesome. Play with the code and let me know what you like and what you don't. Please fill out a bug report on Github if you find a bug, or if you would like a feature to be added. If you would like to discuss Kapi or get help, please visit the Google Group.