Animating Parts of HTML Elements - taccGL™ Tutorial

Rectangular Parts - Clip

taccgl™ has various methods to restrict a transition to operate only on a part of an HTML element. This is useful to select a part of an image or a texture for an animation and it is used often to split an element into parts that move independently.

The first example below selects the upper left part of the sample element starting at an x- and y-offset of 11px with width 300px and height 200px. It uses the clip method, which receives the coordinates of the top left corner of the selected portion, the width and the height as parameters. The second example uses the second form of clip which gets the upper left and the lower right point as parameters. The third example applies this to animate the left and right half of the element independently using a first transition for the left half and a second rotating transition for the right half, creating a kind of fold effect.

Animating Clip - ClipFrom and ClipTo

It is possible to give different restrictions for the begin (clipFrom) and the end (clipTo) of a transition to create a kind of clipping animation. The first example uses clipTo to restrict to an almost empty 1x1 portion. Sinces clipFrom is not given the default is "no restriction". In total this creates a clipping animation that makes the element vanish. Vice versa the second example makes an element appear.

Triangluar Parts

By using taccgl.triangle as second parameter of actor the top left triangle of an HTML element can be selected (1st example below). clip can be used as explained above (2nd example below) in order to move the top left corner of the triangle and to change height and width.

Note that the second point given to restrict does not neccesarily need to be right or below the first point (or height and width given to clip can be negative). This way it is possible to select the upper right, bottom left, and bottom right triangle of an HTML element as shown in the 3rd-5th examples below.

Selecting an arbitrary Triangle Portion - clipT

Using clipT it is possible to specify all three corners of the selected triangle. It gets three parameters each giving the coordinates of one of the triangles corners.

Just as with clipFrom and clipTo there are clipTFrom and clipTTo for animating.

Selecting an arbitrary Triangle Portion - clipR

Parallelogram Shaped Parts using clipR

When using methods clipR or clipT on full elements, instead of triangles, you can select a parallelogram shaped part of an element. As for triangles clipR receives 3 pairs of parameters (i.e. 6 numbers). The first pair gives coordinates of the top left corner. The second and third pair width and height in vector form. All numbers are relative to the element, whereby 0 means left or top and 1 right or bottom. The following two examples demonstrate this.

As a special case you can also specify a rectangular part with clipR, which is sometimes shorter than clip if all numbers are relative values, see the third example below.

Just as with clipFrom and clipTo there are clipRFrom and clipRTo for animating.

Finally some examples with clipT:

Combined Examples

Text appearing Diagonally

The following example makes text appear in a diagonal way. The text is written into the bottom right triangle of an HTML element. Afterwards using a restrict animation the triangle is made to appear (see first version below). Then the background color is removed (second version below) and a motion of the HTML is added (third version).

Note that the text needs to fit into the bottom right triangle of the HTML element, which is achieved by enlarging the HTML element. The element, however, can be hidden and the text can be made to appear whereever desired using from/to (final version below).

Text appearing behind Triangle

The following example makes some text appear diagonally from nowwhere. In fact the text appears behind a white triangle. For illustration the first version of the example below shows the triangle in green and the second one in white. The element with id "htmlel60" contains the text and moves. The element with id "htmlel61" is illustrated as a blue box and is turned into a triangle while the animation is running.

WebGL™ is a trademark of the Khronos Group Inc.