HTML5 Canvas 2D Library
 

clipTTo Library Method

Short Description: Animate Clipping - Set end point

Signature: t.clipTTo (s,t,ws,wt,hs,ht) or (l,r,b)
Group: Shape
Class: transition Class
 
HTML Element
With some text.

The parameters have the same meaning as with clipT. The methods sets the end point of a clipping animation.

A clipping animation at the begin clips a certain part of the element and at the end another part. Both are set with clipTFrom and clipTTo. If either is missing, it defaults to the complete element or the part previously selected e.g. with clipT.

taccgl.actor("htmlel30",taccgl.triangle).clipTFrom({ox:11,oy:11},{rx:1,oy:11,ox:-11},{oy:250,ox:100}). dur(3). start();
RUN
taccgl.actor("htmlel30",taccgl.triangle).clipTFrom({},{rx:1},{rx:0.5,ry:0.5}). dur(3). start();
RUN
taccgl.actor("htmlel30",taccgl.triangle).clipTTo({},{rx:0.5},{rx:0.5,ry:0.5}). dur(3). start();
RUN
Sample HTML Element containing some text.
taccgl.actor("htmlel45",taccgl.triangle) .lightBgAmbDiff("lightblue",1,1) .clipTTo({hx:1,hy:1},{hx:1},{hy:1}) .clipTFrom({hx:1,hy:1},{hx:1,hy:1,ox:-1},{hx:1,hy:1,oy:-1}). dur(3). start();
RUN
taccgl.actor("htmlel45",taccgl.triangle) .lightBgAmbDiff("white",1,1) .clipTTo({hx:1,hy:1},{hx:1},{hy:1}) .clipTFrom({hx:1,hy:1},{hx:1,hy:1,ox:-1},{hx:1,hy:1,oy:-1}). dur(3). start();
RUN
taccgl.actor("htmlel45",taccgl.triangle) .from({hx:-.5,hy:-.5}).clipTTo({hx:1,hy:1},{hx:1},{hy:1}).clipTFrom({hx:1,hy:1},{hx:1,hy:1,ox:-1},{hx:1,hy:1,oy:-1}). vEnd(0,0,0). dur(1). start();
RUN
taccgl.actor("htmlel45",taccgl.triangle) .from({hx:-1,hy:-1}).to({hx:-.5,hy:-.5}) .clipTTo({hx:1,hy:1},{hx:1},{hy:1}) .clipTFrom({hx:1,hy:1},{hx:1,hy:1,ox:-1},{hx:1,hy:1,oy:-1}) .vEnd(0,0,0). dur(1). start();
RUN

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:transition.clipR - Select Relative Part / Clip-To Part
Previous Page: transition.clipTFrom - Animate Clipping - Set starting point