Because of performance problems on your computer/device/browser animations run only on a small part of the screen and not full screen as normally. Move the mouse to see different parts of the animation.
HTML5 2D and 3D Canvas
Animation Library taccGL
Improve Look and Feel of web pages combining
web graphics-standards HTML5 Canvas, WebGL™, and CSS:
Advanced Graphics for HTML5 / CSS Web Pages
by adding 2D and 3D graphics to your web pages.
3D Objects from scene files
Deformed, sliced, mapped elements
Lighting and Shading
GPU based WebGL™
fallback to 2D canvas
adding 2D and 3D graphics to your web pages.
Plug-In free, cross html5 browser, open source.
Easy use with
based on HTML 5 Canvas and WebGL™
Enlarging 3D Objects
External 3D Models:
WebGL™ is a trademark of the Khronos Group Inc.
HTML element mapped on Cube
- Display 3D Objects designed with a 3D Design Program such as Blender
- Animate: Linear and Accelerated Motion and Rotation, Zoom, Motion of Textures etc.
- Parallax Scrolling
2D / HTML / CSS
- High performance animation of CSS formatted HTML elements via GPU support (WebGL™)
- Animate: Linear and Accelerated Motion and Rotation, Zoom, Clip, Morph, Deform, Map as Textures, Texturemotion etc.
- Display HTML elements in 3D space with 3D lighting, consistent hidden surface handling and shadows
HTML Element Animated with
taccGL and WebGL
Integration of HTML/CSS with 3D
- Hover 3D objects over web pages casting shadows on html
- Postition 3D objects relative to HTML elements (before, on top etc.)
- Cast Shadows from 3D Objects to HTML elements and vice versa
- Concise Fluent interface for operations on multiple selected objects or elements
3D Extensions and Compatibility
- Full page WebGL™ on (very) long scrolling web pages (overcomes canvas size limitations by simulating a full page
canvas with a smaller full window canvas)
- Use WebGL™ if suitable on the target device, otherwise assist in showing alternative content e.g. via 2D Canvas as fallback
- Show multiple / many objects on a single canvas (avoiding the browsers number of canvas
limitation and) permitting full page animations with 3d objects
- Determine target device performance and graceful feature degradation when needed.
E.g disable shadows on slower devicws, use per vertex shading, reduce canvas size
full scale 3D hardware graphic acceleration. This article describes, how to build parallax scrolling websites
with full 3D harware acceleration and WebGL™
Create a 3D model using a (commercial or open source) 3D modelling program and use
for drop-down and pop-up menues etc. more
The css visibility property shows and hides elements.
Transitions on visibility do not perform an animation but are
for combination with other CSS transitions e.g. CSS Transition Opacity for Fade Effects.
The blog article gives various visual effects made that way
comparing them with
taccgl™ transitions. more
The CSS display property can be used to completely remove an element and all space occupied.
The CSS spec does not provide CSS transitions on display but css transitions on height
can be used instead.
These can easily be combined with taccgl™ transitions
to play some visual effects while the element appears or disappears
taccgl™ includes functions for deformation and morphing of HTML elements.
For example an element can be morphed from a rectangle into a circle or it can
be mapped on an uneven waveformed surface
Beta Version 0.62 Released
Version 0.62 was released on November 1, 2020.
Download, Version Information
This is a beta release 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
We would be happy for bug reports and comments .
taccgl™ is provided under an open source BSD like License. You can download the library and place it on your test web server.
When showing, viewing, or developing animations and/or computer games
take care about epilepsy. A warning message shows up before viewing the examples.
If you like taccgl™ please share it with others, e.g. link to us,
refer to us in social networks, or follow us on twitter etc.
is a fast Script Library to animate
HTML+CSS pages in 2D and 3D using HTML 5 canvas,
tries to use WebGL™ and hardware graphic acceleration with 2D canvas fall-back.
It integrates well with HTML and CSS to animate many CSS formatted 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 with restricted features
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.
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, current versions of most other browsers.
For older browsers it becomes inactive, the idea is that users can still
view pages that include the library, however without the animations.
taccgl™ can display CSS formatted HTML elements with the new HTML5 3D canvas which brings the following
Elements can be animated using GPU acceleration,
they can be moved, accelerated, deformed, bent, lighted etc.
and they can enjoy the performance of the GPU which
normally has enough power to separately animate
thousands of copies of (fragments of) HTML elements.
Also HTML elements can be fully integrated into a 3D scene, e.g.
they can rotate in 3D, they can be displayed before or behind other HTML elements
even partially, and they can cast shadows or shadows can be casted on them.
In addition HTML elements can be mapped on 3D objects such as cubes or spheres.
- animating CSS formatted HTML elements
- mapping of HTML elements on 3D objects
- displaying 3D objects created with a modelling program (e.g. Blender)
and aligning them with HTML and CSS
The new HTML 5 canvas feature in its 3D version brings fantastic new graphic and animation features, such
- running of graphic transitions directly in the clients GPU (graphic acceleration unit)
- performing of animations with thousands of triangles,
- separately controlling every pixel and calculating each pixel's color once per frame,
and also special 3D features such as
- 3D depth buffering for hidden surface handling,
- 3D lighting for simulating light sources and reflection on 3D objects, and
- automatic 3D shadow calculation.
In pure HTML 5 canvas 3D/WebGL™ the content to be displayed must be individually programmed.
The taccgl™ library greatly simplifies this process.
by allowing the user to use CSS formatted
HTML elements togehter with 3D Models created with a modelling program.
Hover or click on the various green links on this page to see pop-ups
containing additional explanations.
The appearing pop-up window is displayed using taccgl™ and WebGL™,
mostly (performance of the GPU permitting) to correctly display its shadows.
Note that the shadow can be quite complex, since the underlying page is
not flat but seen as a 3D surface.
In addition opening and closing animations are played.
The opening animation is choosen randomly from various opening animations that are e.g.
morphing the element from a circle or a wave from to its final rectangular form.
The closing animation makes the element explode into many parts.
Hover or click on the various 3D objects and screenshots further down on the page to see
animations enlarging and rotating the objects.
|Rotate || drag with left mouse button |
|Move || drag with right mouse button |
|Rotate Z-axis || drag with left mouse button and press CTRL |
|Move Z-axis || drag with right mouse button and press CTRL |
|slow/precise || hold down shift while dragging |
|Exit || left click |