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.

Following is a technical demo which shows some of the previosly mentioned features.

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.

  • Pingback: Tweets that mention Animation framework | HyperAndroid --

  • Franz

    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!

  • kaneel

    serious dope! I love the fish field!

  • Pingback: EdTechDev()

  • Pingback: Eltit Golb()

  • Pingback: Quora()

  • Pingback: Quora()

  • Oposit

    Simplemente fabuloso

  • Pingback: MegaSoul · Game Engines – GitHub()

  • Pingback: What do we need for HTML5 games to be awesome? « Smashinglabs()

  • Bert Wijnants


  • Eric Berry

    Amazing job! Thanks for making this open source!!!

  • Anonymous

    I love this. Seriously love this.

  • Michael Willy

    Are you available for a freelance project.?

    • Anonymous

      send me an email :)

      2011/11/26 Disqus

  • Vinay Chandra

    can we embed font through the caat…????

    • Anonymous

      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

  • Drudi

    is this project still alive ?

  • Pingback: WebGL Game – Sumon (aka Math Mayhem) and CAAT (Canvas Advanced Animation Toolkit)()

  • Sandeep Bamane

    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 .

  • Sanjaydhawan


    Can it handle multi-column long text with an option for dynamic font sizes and text reflow ?

    • hyperandroid

      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

      • Sanjaydhawan

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

        • hyperandroid

          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


      • Sanjaydhawan

        Can CAAT be mixed with another JS framework ?

        • hyperandroid

          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.


  • Clemorphy

    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.

  • Pingback: Ludei » The CocoonJS Launcher App: A simple tutorial()

  • sergi

    CAAT follows the standard AMD ? Is possible to it use with Requirejs ?


    • hyperandroid

      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 :) ?


  • Vinícius Uzêda


    The tutorial says:

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


  • Sander

    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!

  • Leandro A. Aguilar Ogrin

    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.

  • ibu

    can we do masking how can we set the border range of masking to one actor?