HTML5 Canvas Library

Integration of WebGL™ with HTML / CSS Pages - taccGL Library Tutorial

HTML Element

This tutorial already showed various examples that appear to animate HTML elements visible on the page, e.g. the First Example. In fact WebGL™/the GPU cannot directly animate HTML elements, just images on triangles. So taccgl™ takes a snapshot image of the HTML element and maps this image on a rectangle (made from 2 triangles).

This would normally show animated elements twice, the standard browser display and the display via WebGL™. So taccgl™ automatically uses css visibility:hidden on the HTML element while it is animated via WebGL™.

The first example below, shows this behaviour. The second line of the example leaves the HTML and CSS alone and just runs the WebGL™ animation, which results in two copies of the HTML element being visible."htmlel"). to({ox:-500}). dur(3). start();
taccgl.a("htmlel"). paint(). to({ox:-500}). dur(3). start();

Note that actor implicitly includes the functionality of a, paint, hideAtBegin, and visAtEnd. For paint we refer to the tutorial section HTML Elements on Canvas. hideAtBegin hides the HTML element before playing the transition and visAtEnd makes it visible afterwards.

It is also possible to animate HTML elements that are and stay hidden, as discussed in the next section. Animations can also make an HTML element appear or disappear as discussed in the then following section.

Animating Hidden Elements

Animation examples, so far shown in this tutorial, animated an HTML element (currently) shown on the screen. Likewise it is possible to animate "hidden" elements:

<div id="hid" style="visibility:hidden; font-size:120px; position:absolute">Hidden TEXT</div>"hid"). to({oy:-500,ox:-500}). dur(3). start();
RUN"hid"). resize(200,30). to(20,50,-4000). rotateMiddle(0,1,0). dur(3). start();

Note that this works only for hidden elements (CSS property visibility is set to hidden) and not with elements disabled in some other way e.g. CSS property display set to none or width / height set to 0, etc. Also hidden parts (elements nested inside the animated element) do not show up. If you want to avoid, that a hidden element nevertheless takes up some empty space on the screen, you can for example set the CSS property position to absolute.

It is possible and useful to put several HTML elements that are needed for animation into a single big hidden div

Do not
<div style="visibility:hidden; font-size:120px; position:absolute; top:0px; left:0px ">
<div id="txt1">Make</div>
<div id="txt2">Sure</div>
<div id="txt3">Elements</div>
<div id="txt4">Do not</div>
<div id="txt5" style="background-color:red">Overlap.</div>
</div>"txt1").to({el:"ex40"}). dur(3).start();"txt2").to({el:"ex40"}). dur(3).startTime(1).start();"txt3").to({el:"ex40"}). dur(3).startTime(2).start();"txt4").to({el:"ex40"}). dur(3).startTime(3).start();"txt5").to({el:"ex40"}). dur(3).startTime(4).start();

Care must be taken, that animating elements that visually overlap might lead to possibly unexpected results. We will discuss that later, for the time being make sure that all elements used in a single animation do not overlap.

Making Things Appear

Animations that make an HTML element appear or disappear are quite common. In order to create a pop-up that appears when the user clicks a link, you first create the content of the pop-up as a hidden HTML element and then pass "visible" as third argument to actor:

<div id="popup" style="visibility:hidden; position:absolute; width:50%; height:200px; padding-left:10%; padding-right:10%; background-color:cyan">
<h2 style="margin-top:50px"> Making Things Disappear</h2>
You can make something disappear by passing <tt>hidden</tt> as third parameter to <tt>actor</tt>.
Click on the above X to see.
</div>"popup",null,"visible") . from({rx:-1,oy:-500}). rotateMiddle(0,1,0).start()

In fact the third argument of actor specifies the visibility of the element after running the animation. You can also pass hidden to make an element disappear or "" to give an element its default visibility. Note that we in most cases so far used actor with just one argument, however, some examples passed e.g. taccgl.dddBox to show a box. In order to use the third, but not the second argument, null needs to be passed as second argument as shown in the examples.

The following example code actually sits behind the div tag in the example above and creates an X in the top right of the popup, being a link to close the popup again.

<div style="position:absolute; right:20px"><a href="'popup',null,'hidden'). to(0,0,0). rotateMiddle(0,1,0).start(); taccgl.start()">X</a>

taccgl™ tries to make sure that even if the browser for some reason cannot show animations, setting of the visibility still works. So even in older browsers without canvas, the popup example would still work, but without the animation.

You can use HTML and CSS to place the popup wherever you like, however there is a limitation in taccgl™ that only elements appearing within a certain pixel range can be animated, which means that these examples won't work unchanged after a certain position on long HTML pages that are employing scrolling (see texCan options on Library Options).

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:Timing Transitions
Previous Page: Colors and Textures