taccgl™ is a HTML 5 canvas 3D and 2D Script Library for animating HTML pages supporting
  • 2D and 3D Animations via HTML 5 canvas
  • if available GPU graphic acceleration (via HTML5 canvas 3D, WebGL™)
  • animation of HTML elements
  • (aims at) cross browser HTML 5
  • adding animations to existing pages
  • open source, BSD like license
HTML5 Canvas Animation
Further reading :

When showing, viewing, or developing animations and/or computer games take care about epilepsy. A warning message shows up before viewing the examples.

HTML5 Canvas 3D Animation

taccgl™ is designed for general cross browser desktop HTML pages. It is inactive on old browsers (i.e. IE 8 and older) or slow computers / devices. The idea is to put all essential content in HTML elements, accessible with all browsers and readable by search engines, and to add animations on these elements for the majority of the audience using newer browsers / equipment. It takes advantage of the GPU acceleation using HTML 5 canvas 3D WebGL™ as supported by recent versions of e.g. Firefox and Chrome on suitable hardware and drivers. See Compatibility for details.

This is one of the first public beta releases of the library and quite naturally it contains bugs and is not yet completely implemented (e.g. does not yet implement all HTML tags and not all CSS properties). See Restrictions. We do not advise to use the library for production use yet. We would be happy for bug reports and comments. We currently only have development downloads. In future we plan to provide compressed versions for faster download to the client.

taccgl™ is provided under an open source BSD like License. You can download the library and place it on your test web server.

is a fast Script Library to animate HTML pages in 2D and 3D using HTML 5 canvas, if available with hardware graphic acceleration. It integrates well with HTML to animate HTML elements (like <img> and <p>).

Under good conditions the library directly uses hardware graphic acceleration and its performance critical parts run directly on the computers graphic unit. This provides an extreme performance gain compared to DOM and script based animations and allows you to run smooth animations with thousands of elements.

If no hardware acceleration is present (or if it is not usable because of the browser or the graphics driver) the library uses the HTML 5 - 2D canvas which provides quite fast animations on fast computers as well.

For slow graphic accelerators and/or slow processors that can not handle the full screen resolution smoothly, the library plays the animations only on a portion of the screen or becomes completely inactive to not interfere normal operations on the page.

On older browsers that do not support HTML 5 canvas and no animations show up.

The library is written in JavaScript and GLSL (a C like vector programming language). If supported, the GLSL parts are downloaded into the graphics card and executed there; possibly in parallel on several processors, which gives a dramatic performance gain.
taccgl™ is an HTML 5 library making special use of the new canvas feature. HTML 5 means that the library explicitly runs only on newer browsers, e.g. IE 9.0 and up. For older browsers it becomes inactive, the idea is that users can still view pages that include the library, however without the animations.

The new HTML 5 canvas element provides two drawing modes: 2D and 3D. While 2D drawing is part of the standard, 3D is not. Still many browsers provide a 3D drawing mode for canvas.

For the purposes of taccgl™, 3D canvas is a means to access the computers hardware graphic acceleration. taccgl™ is not dependent on it and can do 3D animations also with the 2D drawing context of HTML (and also 2D animations with the 3D drawing context). On the other hand many animations look better if the 3D canvas drawing is present.

Normally HTML 5 canvas is intended, supported, and used for inserting graphic images or animations into HTML 5 documents. These take up a rectangular portion of the document and besides that are indepented on the HTML elements and the DOM.

taccgl™, however, uses canvas to create animations that integrate or interact with the HTML elements. Animations use the same coordinate system so that an animation can move to a certain element, can move it around, can bend, or rotate HTML elements, or can even map HTML element on 3D objects.

2D Features
3D Features