HTML5+CSS on Canvas 3D WebGL (TM) Library
 

Advanced Visibility Control

"AtBegin" and not "AtBegin" Versions

The methods hide and opacity immediately render the associated element invisible. In contrast the normally recommended methods hideAtBegin and opacityAtBegin do so at the begin of the transition. However, if no start time is set, an transition starts immediately after start and so there often is no visual difference. You can check out the 4 examples below and will notice that there is a difference between hide and hideAtBegin only if startTime is set.

Examples

taccgl.a("testimg").paint().hideAtBegin().visAtEnd().to(500,500,1).start(); RUN
taccgl.a("testimg").paint().hide().visAtEnd().to(500,500,1).start(); RUN
taccgl.a("testimg").startTime(1).paint().hideAtBegin().visAtEnd().to(500,500,1).start(); RUN
taccgl.a("testimg").startTime(1).paint().hide().visAtEnd().to(500,500,1).start(); RUN

Normally the AtBegin versions are recommended, because a startTime is easily added. Also in case the transition is cancelled, e.g. by not calling start or start or by using stop the AtBegin do nothing as one might expect.

A useful example for hide is:

Examples

taccgl.a("testimg").startTime(1).paint().hide().showBefore().visAtEnd().to(500,500,1).start(); RUN

Using showBefore the image of the animated element is shown as still image before the animation starts at second 1. Therefore it is useful to hide the HTML element right from the begin.

"Final" Versions

The methods visFinal and opacityFinal make HTML elements visible, not at the end of a transition, but at the end of the complete animation. The complete animation ends when all transitions have terminated.

Often it is indeed the desired bahaviour to hide selected HTML elements during an animation and to restore visibility afterwards and it initally works beautifully to make these elements visible using visFinal. However, if you want to add a permanently spinning logo to the web page, or just permanently display a 3D object, then this solution stops working. The spinning logo or the 3D object is for taccgl™ just a very long lasting transition and so the animation (almost never) ends and desired visibility action never occurs.

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:transition.hide - Hide associated HTML element
Previous Page: transition.opacityAtEnd - Set opacity of associated HTML element after transition