Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Tree: 025ad3cb7a
Fetching contributors…

Cannot retrieve contributors at this time

135 lines (93 sloc) 5.499 kB
<!DOCTYPE html>
<html xmlns="" xml:lang="en" lang="en">
<!-- Title -->
<title>Kapi - open source keyframing animation API for HTML 5 canvas</title>
<link rel = "stylesheet" type = "text/css" href = "css/style.css" />
<!-- JavaScript includes -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/kapi.min.js"></script>
<script type="text/javascript" src="js/shapes.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="js/demo_runner.js"></script>
<link type="text/css" rel="stylesheet" href="js/syntaxhighlighter/styles/shCoreDefault.css"/>
<!-- Meta tags -->
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-10592695-6']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
<div class="container">
<h3>A keyframing API for the HTML 5 canvas</h3>
<h4>A JavaScript framework by <a href="" target="_blank">Jeremy Kahn</a></h4>
<li><a href="index.html">Home</a></li>
<li><a href="kapi_doc.html">Kapi constructor and object reference</a></li>
<li><a href="actor_doc.html">Actor object reference</a></li>
<li><a href="extending.html">Extending Kapi</a></li>
<li><a href="" target="_blank">Github repo</a> - <em>fork 'n follow!</em></li>
<h2>Latest stable release: <a href="js/kapi.min.js" target="_blank">1.0.7</a>. (Includes <code>kapi.tweens.js</code>)</h2>
<p class="deprecation-notice"><strong>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 <a href="">Rekapi</a>.</strong></p>
<p>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 <a href="" target="_blank">README</a>.</p>
<p>Kapi is free and open source software (<a href="" target="_blank">MIT license</a>). You are completely free to use, distribute, and modify the code. The Github repo contains all of the source files.</p>
<canvas id="demo1">IE sucks.</canvas>
<p>Here's the code that generated what you see above:</p>
<pre class="brush: js;">
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);
<h3>More demos</h3>
<p>Here's a demo of the type of animation that Kapi can help you make. View the source to see how it works!</p>
<ul class="demo-list">
<li><em><a href="demo_proj/">The future is now!</a></em></li>
<p>Kapi is used in production sites as well:</p>
<ul class="demo-list">
<li><a href="" target="_blank">CME Group 2010 Annual Report</a> (Kapi animations can be found on the <a href="" target="_blank">Financial Highlights</a> and <a href="" target="_blank">Financial Milestones</a> pages)</li>
<p>More examples can be found in the docs, near the respective API documentation.
<h3>Helping out</h3>
<p>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 <a href="" target="_blank">fill out a bug report on Github</a> 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 <a href="" target="_blank">Google Group</a>.</p>
<p>Also, feel free to ping me on Twitter at <a href="" target="_blank">@jeremyckahn</a>.
Jump to Line
Something went wrong with that request. Please try again.