CAAT. Canvas Advanced Animation Toolkit

Find tutorials and demos on CAAT Here

Fork and contribute to CAAT here

CAAT in essence is a multi-instance director-based Scene graph manager.
It is multi-instance in the sense that you can set an undefined number of directors up for each web page.
Each director is able to manage different Scenes with different timelines.
The scenes contain a graph of different Actor and Containers which conform the animation elements.

CAAT has some features out-of-the-box among which we can highlight:

  • Seamless zero-coding WebGL and CSS rendering engines.
  • Unlimited number of Scenes per Director.
  • Unlimited number of Actors and ActorContainers per Scene.
  • Hierarchycally applied affine transformations (rotations, scales and translations).
  • Hierarchycally applied alpha composition.
  • Unlimited number of timers per Scene.
  • Ability to define complex paths for translations applied to Actors and ActorContainers.
  • Easing and interpolation functions for affine transformations and alpha transparency application.
  • Homogeneous coordinate system. Each contained Actor will receive correct input coordinates on its coordinate system
    regardless of its parents applied transformations.
  • Abstracted input system, from mouse events to keyboard and accelerometer.
  • Resource management and preloading.
  • Many types of actors supported: Sprites, Shapes, Text, Path, Interpolator, etc.
  • Easily extendable framework.
  • Open Source and MIT Licensed.
  • Performs properly in all major canvas enabled browsers. Internet explorer must be version 9 or greater.

I’ve developed the game MathMayhem on top of CAAT.

Animation Framework

Math Mayhem

A rush against time to add up the required number. Beat the chrono while stressing your mental agility.

Or play WebGL enabled version.

36 thoughts on “CAAT. Canvas Advanced Animation Toolkit”

  1. Genial… si estás pensando en dejarlo open source y necesitas beta-testers, encantadissimo. Yo vengo de actionscript, no se si te sirve.

    Saludos y felicidades!


  2. Pingback: EdTechDev
  3. Pingback: Eltit Golb
  4. Pingback: Quora
  5. Pingback: Quora
    1. Hi, vinay

      If you mean whether you could use embedded fonts like google fonts, the answer is yes.
      The only drawback is that by the time the canvas element accessed in example a CAAT.TextActor which uses the font embedded, it may happen the font is not still loaded. To prevent this, you should create a div in your markup which references the embedded font, something like:


      which will make your embedded font to be preloaded.

      CAAT supports sprited fonts with the object CAAT.Font object. You could also draw text with an atlas texture with the CAAt.SpriteImage object as well.
      Hope this helps.



      2012/1/24 Disqus


  6. I have 2 different CAAT.Actor objects. I require the effect of fading in and out on both objects but one at a time. First obj1 shd fade out then obj2. Loop continues when obj2 has fade out ….

    I tried applying CAAT.AlphaBehavior set the cycle as false alpha_1= new CAAT.AlphaBehavior().
            setFrameTime( 0, 3000 ); as soon as i get expired event  –  i try resetting same behavior again. But this doesnt seem working.. Let me know if i am on right track or if there is a better way to achieve this behavior .


    1. There’s no such feature in CAAT.
      If using CSS, you could access the wrapped div object and set its inner html though.


      El 12 de marzo de 2012 03:55, Disqus


      1.  Thank you for the reply.
        Can we package CAAT efficiently with Phone Gap for Android devices ?


      2. By efficiently you mean it will perform fast ?
        If so, I think it won’t. And not because CAAT implementation.
        You could try other javascript wrapping frameworks like CocoonJS from



      3. CAAT is opensource and MIT license, so depending on other JS frameworks you could.
        Up to you, but always make sure both licenses can co-exist.



  7. Hi.
    According to documentation, have mouseOver and mouseOut events.But I can’t get them working. Is this an error in the documentation or do these events really exist ?What are the differences with the mouseEnter and mouseExit events ?Thx.


    1. It doesn’t.
      Have thought about it since a while, but i’m not sure whether it will be worth it.
      any comments in favor of AMD or CommonJS 🙂 ?



  8. Hi,

    The tutorial says:

    There’s also a native implementation which executes CAAT seamlessly on iOS and Android.
    Where can I get those?



  9. Is this project still alive? Can’t seem to find an active community. Am I wrong? This project looks really promising, but I need to know if it’s not abandoned… Thanks!


  10. Hi, I have wrote in the forum, still no can I rotate an actor ( an image for example) in each path segment? I want it rotates to certain degrees when going up and then other degress when going down. Like in some flappy bird jump movement.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s