Canvas Library

Visibility Control

taccgl™ normally shows or animates images of HTML elements, while the HTML elementes themselves remain invisible.

taccgl™ uses one of two CSS declarations to make an HTML element invisible: either "visibility:hidden" or "opacity:0". Both declarations visually have the same effect: the element vanishes and becomes invisible. When using "visibility:hidden" in addition the element stops receiving any events (e.g. onclick) while with "opacity:0" events are not effected. So using "opacity:0" an element can still remain active, even if actually an image of the element is shown using taccgl™ and not the element itself --- as long as the image of the element is not moved or resized.

When using actor the HTML element is automatically hidden before a transition and made visible afterwards. When using a this needs to be done explicitly using the methods hideAtBegin and visAtEnd or opacityAtBegin and opacityAtEnd.


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

In special cases you can leave out one or both of these method calls, e.g. if you do not want to hide the HTML element (i.e. show the HTML element and the image), or if you want the HTML element to remain hidden after the animation.


taccgl.a("testimg").paint().to(500,500,1).start(); RUN
taccgl.a("testimg").paint().hideAtBegin().to(500,500,1).start(); RUN
taccgl.a("testimg").paint().opacityAtBegin().to(500,500,1).start(); RUN
taccgl.a("testimg").paint().visAtEnd('').from(500,500,1).start(); RUN

Next Page:transition.hideAtBegin - Hide associated HTML element at begin of transition
Previous Page: transition.onEnd - Set action to perform at end of transition