Simple WebGL™ Html5 Popup Animations with no more than 4 Lines of javaScript

Pop-Ups are very common in today's HTML5/CSS web pages, as explicit pop-up boxes, dialog or alert boxes, as pop-up menues and much more.

The first very simple example shows a pop-up flying in from the top left of the screen. WebGL™ would not have been necessary for this first example, just to show the basics. The example consists of taccgl.actor("popup",null,"visible"), which selects the HTML element with id=popup for animation and specifies "visible" to make this element visible after playing the animation. The from(0,-400,0) then defines a transition that moves the pop-up into the page from coordinates (0,-400) i.e. the top left of the screen. from works in 3D and needs a third coordinate z=0. The duration(2) defines that the transition will run for 2 seconds. After being stated the animation runs in parallel to further execution of javaScript.

For a detailed description of this javaScript code please refert to the taccgl™ Tutorial.

The next simple example moves in a box. It differs from the first example by using taccgl.dddBox as second parameter for actor (Boxes). Using depth(200) the depth of the box is specified. The rotateMiddle specifies an additional rotation. Rotations will be discussed below. See Simple Rotation.

All the examples on this page open and close a sample text box that is formatted using HTML and CSS as follows:

X

Demo HTML/CSS Text

You can add here the HTML text of your choice. This is just dummy text to see how the pop-up looks like.

Click on the X above to see it close.

Continuation

The popup-animations in this article are intended to play when an HTML element changes from visibility:hidden to visibility:visible. During the animation the element is still hidden and the animation is displayed with WebGL™; after the animation WebGL™ becomes inactive and the element visible. So in the box example above the top and right sides of the box vanish when the animation is finished. The following example helps to further smooth this transion. See .

Using cont multiple transitions can be concatinated. The following example first moves in the box as in the example above and then flattens the box. Using cont this second flattening step is defined. depth(600,1) defines a transition gradually reducing the size of the box from 600 to 1. See Continuations.

Resizing and Flexibles

Let's first start with two examples using resize. resize defines an animation that gradually grows or shrinks the animated element. In the example below resize(1,a.h,a.w,a.h) starts with the element of width 1 and its normal height (a.h) and grows it to its normal width (a.w) and height (a.h). This example uses expressions as discussed in Expressions. The second example in addition to the same resize operation moves the element from left to right, so that the element seems opening in the middle.

The following examples, in addition to resize, change the shape of the element: First flexiBorder is used to make the element flexible. Then Wave is used to give the element a Wave form. Finally Rect1 is used to gradually change the Wave form into the normal rectangular form.

The previous 2 examples in addition use ZWave to create a 3D-Wave form and blend to fade in the element.

The next example works in two steps. First it gives the element a circle form and grows it from one pixel size up to a full circle. Then in a second step after the cont it gradually transforms the element from circle shape into the usual rectangular shape. See Flexibles.

Acceleration

The following 3 examples use vEnd(0,0,0) to set the final velocity to 0, which means the motion gradually slows down. The second and third example show a motion from top and from left, by setting the starting coordinates differently using the x and y coordinates of the HTML element a.x and a.y. See Accelerated Motion.

Rotation

The next two examples add some rotation using rotateMiddle. The parameters specify an axis for the rotation. So rotateMiddle(0,1,0) rotates around the y-axis and rotateMiddle(0,.7,.7) around the diagonal of the y and z axis. See Simple Rotation.

Shadows

taccgl™ can automatically show shadows casted from animated elements / objects on other animated elements / objects. In above examples, there are no shadows, because there is just one animated element, while the main body of the page is just HTML and not an element animated with taccgl™. In the example below this is changed using taccgl.a(document.body), which makes the complete document body an animated element. color("black") makes it completely opaque and shadowOnly makes sure that only shadows appearing on the body are drawn with taccgl™, not the content of the body itself.

The next thing needed is posZ, e.g. posZ(-400). This places the pop-up box 400 pixels in front of the document body. With the default z coordinate of z=0, the pop-up box would be immediately on top of the body and consequently case no shadow on it.

Now you will notice on the first example below, that the pop-up shown is enlarged. This is, because it is 400px nearer to the camera and so appears larger. This perspective effect can be undone by resizing the element using resizeZ (see second example).

Finally you will notice that the shadow eventually disappears. This is the case because then the taccgl™ animation terminates and the pop-up box is displayed using HTML.

Page Flip Animation

Another nice effect made with HMTL5/WebGL™ is a page flip lke animation which displays a curved surface.

The next version adds a shadow.

Multi Animations

Using sliceV an element can be cut into vertical slices. All methods called afterwards act separately on each of the slices in parallel.

sliceH cuts the element into horizontal slices and By using both sliceV and sliceH the element is cut into rectangular pieces. sequence is used to perform all the transitions in a sequence.

Finally two more advanced examples. They use the mp method to set different parameters for each of the animated rectangles. mp get a function as parameter. This function is called once for each animated rectangle and it is passed the corresponding transition as parameter a. In the examples for each rectangle a different starting time is selected using the javaScript random function.

Conclusion

This article showed some very small example animations made with taccgl™ and html5-WebGL™. We restricted ourselves on examples that are no longer than 4 lines of javaScript code. To see some more elaborate examples we refer to our Home Page. In order to get a complete understanding of the examples shown in here we refer to the taccgl™ Tutorial and then the taccgl™ Manual.

WebGL™ is a trademark of the Khronos Group Inc.