Transition area | Transition Tweening Alphamask |
---|---|
result: 0 ms - 0.0 fps
|
cvi_trans_lib.js supports image transition capabilities. TransM.js uses 115 transitions for HTML 5 canvas element supporting browsers, 51 transitions for filter|VML supporting browsers and fade and cut for the rest.
Transition | IE fallback | Default tweening |
External resource |
Description | Options | Restrictions |
---|---|---|---|---|---|---|
fade |
linear |
mask image |
Alpha is unique in its ability to use alpha masks themselves as transition effects. Transparent parts appear early, and opac parts appear last. Therefore, no programming is required to generate new transition effects. | Mask image flipping. Default is 0. 1 equals flip horizontal. 2 equals flip vertical. 3 equals flip both. | Using images without alpha channel (e.g. JPEG) as a mask is also supported (requires get / setImageData browser support). |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
quadEaseOut |
Two horizontal lines expands from top and bottom edges toward the center. | none | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
quadEaseOut |
A central, horizontal line splits and expands toward the top and bottom edges. | none | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
quadEaseOut |
Two vertical lines expands from left and right edges toward the center. | none | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
quadEaseOut |
A central, vertical line splits and expands toward the left and right edges. | none | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
quadEaseIn |
Multiple vertical lines expands from right to left. | Number of vertical lines. Default is 8. Minimum is 1. Maximum is 100. | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
quadEaseIn |
Multiple vertical lines expands from left to right. | Number of vertical lines. Default is 8. Minimum is 1. Maximum is 100. | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
quadEaseIn |
Multiple horizontal lines expands from bottom to top. | Number of horizontal lines. Default is 8. Minimum is 1. Maximum is 100. | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
quadEaseIn |
Multiple horizontal lines expands from top to bottom. | Number of horizontal lines. Default is 8. Minimum is 1. Maximum is 100. | none |
Transition | Fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
pixelate |
linear |
A bluring effect to transition from one content to another. | Radius of bluring. Default is 100. Minimum is 8. Maximum is 180. | Only if "cvi_stackblur.js" (Algorithm by Mario Klingemann) is loaded and get/setImageData support is available. Extremely cpu intensive. |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
linear |
Multiple displaced blocks expands from right to left. | #1 Number of horizontal blocks. Default is 8. Minimum is 2. Maximum is 100. #2 Number of vertical blocks. Default is 8. Minimum is 2. Maximum is 100. | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
linear |
Multiple displaced blocks expands from left to right. | #1 Number of horizontal blocks. Default is 8. Minimum is 2. Maximum is 100. #2 Number of vertical blocks. Default is 8. Minimum is 2. Maximum is 100. | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
linear |
Multiple displaced blocks expands from bottom to top. | #1 Number of horizontal blocks. Default is 8. Minimum is 2. Maximum is 100. #2 Number of vertical blocks. Default is 8. Minimum is 2. Maximum is 100. | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
linear |
Multiple displaced blocks expands from top to bottom. | #1 Number of horizontal blocks. Default is 8. Minimum is 2. Maximum is 100. #2 Number of vertical blocks. Default is 8. Minimum is 2. Maximum is 100. | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
checkerboard |
linear |
Multiple circle shapes expands from the center of each circle toward the radius of each circle. | #1 Number of horizontal circles. Default is 8. Minimum is 1. Maximum is 50. #2 Number of vertical circles. Default is 8. Minimum is 1. Maximum is 50. | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
checkerboard |
linear |
Multiple circle shapes expands from the the radius of each circle toward the center of each circle. | #1 Number of horizontal circles. Default is 8. Minimum is 1. Maximum is 50. #2 Number of vertical circles. Default is 8. Minimum is 1. Maximum is 50. | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
flash |
linear |
Transition by fading to and from a solid color. | Hex color string. Default is '#fff'. | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
gradientwipe |
linear |
A Xerox like copy procedure with horizontal movement from right to left. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
gradientwipe |
linear |
A Xerox like copy procedure with horizontal movement from left to right. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
gradientwipe |
linear |
A Xerox like copy procedure with vertical movement from bottom to top. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
gradientwipe |
linear |
A Xerox like copy procedure with vertical movement from top to bottom. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
radialwipe |
bounceEaseOut |
Image rotates clockwise in from the upper-left corner. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
radialwipe |
bounceEaseOut |
Image rotates counter-clockwise in from the upper-right corner. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
radialwipe |
bounceEaseOut |
Image rotates clockwise in from the lower-left corner. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
radialwipe |
bounceEaseOut |
Image rotates counter-clockwise in from the lower-right corner. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
radialwipe |
bounceEaseOut |
Image rotates clockwise out from the upper-left corner. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
radialwipe |
bounceEaseOut |
Image rotates counter-clockwise out from the upper-right corner. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
radialwipe |
bounceEaseOut |
Image rotates clockwise out from the lower-left corner. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
radialwipe |
bounceEaseOut |
Image rotates counter-clockwise out from the lower-right corner. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
gradientwipe |
sineEaseOut |
A curl wipe with horizontal movement from right to left. | Divisor of the image width as curl width. Default is 6. Minimum is 2. Maximum is 10. | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
gradientwipe |
sineEaseOut |
A curl wipe with vertical movement from bottom to top. | Divisor of the image height as curl height. Default is 6. Minimum is 2. Maximum is 10. | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
linear |
A classic hard cut wipe. | none | No tweening available. Transition starts immediately. |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
linear |
A fade effect to transition from one content to another. | Percentage of time where the old and new content overlap and are shown simultaneously as the transition is being played as a fraction of the duration time. Default is 100. Minimum is 0. Maximum is 100. | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
fade |
linear |
Simulates a photographers camera flash light as transition by fading to and from solid white color. | none | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
sineEaseInOut |
A gradient wipe with horizontal movement from right to left. | Percentage of the wipe area width. Default is 25. Minimum is 5. Maximum is 100. | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
sineEaseInOut |
A gradient wipe with horizontal movement from left to right. | Percentage of the wipe area width. Default is 25. Minimum is 5. Maximum is 100. | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
sineEaseInOut |
A gradient wipe with vertical movement from bottom to top. | Percentage of the wipe area height. Default is 25. Minimum is 5. Maximum is 100. | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
sineEaseInOut |
A gradient wipe with vertical movement from top to bottom. | Percentage of the wipe area height. Default is 25. Minimum is 5. Maximum is 100. | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
inset_rightdown |
cubicEaseInOut |
A box expands from the lower-right corner to the upper-left corner. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
inset_rightdown |
cubicEaseInOut |
A box expands from the lower-left corner to the upper-right corner. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
inset_rightdown |
cubicEaseInOut |
A box expands from the upper-right corner to the lower-left corner. | none | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
cubicEaseInOut |
A box expands from the upper-left corner to the lower-right corner. | none | none |
Transition | Default tweening |
Description | Options | Restrict. | Transition | Default tweening |
Description | Options | Restrict. |
---|---|---|---|---|---|---|---|---|---|
sineEaseIn |
A cross shape expands from the center. | none | none | sineEaseOut |
A cross shape shrinks to the center. | none | none |
Transition | Default tweening |
Description | Options | Restrict. | Transition | Default tweening |
Description | Options | Restrict. |
---|---|---|---|---|---|---|---|---|---|
sineEaseIn |
A plus shape expands from the center. | none | none | sineEaseOut |
A plus shape shrinks to the center. | none | none |
Transition | Default tweening |
Description | Options | Restrict. | Transition | Default tweening |
Description | Options | Restrict. |
---|---|---|---|---|---|---|---|---|---|
sineEaseIn |
A square shape expands from the center. | none | none | sineEaseOut |
A square shape shrinks to the center. | none | none |
Transition | Default tweening |
Description | Options | Restrict. | Transition | Default tweening |
Description | Options | Restrict. |
---|---|---|---|---|---|---|---|---|---|
sineEaseIn |
A circle shape expands from the center. | none | none | sineEaseOut |
A circle shape shrinks to the center. | none | none |
Transition | Default tweening |
Description | Options | Restrict. | Transition | Default tweening |
Description | Options | Restrict. |
---|---|---|---|---|---|---|---|---|---|
sineEaseIn |
A diamond shape expands from the center. | none | none | sineEaseOut |
A diamond shape shrinks to the center. | none | none |
Transition | Default tweening |
Description | Options | Restrict. | Transition | Default tweening |
Description | Options | Restrict. |
---|---|---|---|---|---|---|---|---|---|
sineEaseIn |
A five-pointed star shape expands from the center. | none | none | sineEaseOut |
A five-pointed star shape shrinks to the center. | none | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
linear |
A pixelization effect to transition from one content to another. | Sets the maximum width in pixels of each pixelated square. Default is 40. Minimum is 10. Maximum is 50. | IE do not respect the elements shape and performs always a rectangle transition. |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
slide_hide |
backEaseOut |
The new content is pulled in from right to left. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
slide_hide |
backEaseOut |
The new content is pulled in from left to right. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
slide_hide |
backEaseOut |
The new content is pulled in from bottom to top. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
slide_hide |
backEaseOut |
The new content is pulled in from top to bottom. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
slide_push |
cubicEaseOut |
The old content is pushed out by new content from right to left. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
slide_push |
cubicEaseOut |
The old content is pushed out by new content from left to right. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
slide_push |
cubicEaseOut |
The old content is pushed out by new content from bottom to top. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
slide_push |
cubicEaseOut |
The old content is pushed out by new content from top to bottom. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
fade |
linear |
A circle gradient expands from the center in two steps. | none | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
sineEaseInOut |
A radial hand sweeps clockwise from the twelve o'clock position. | none | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
sineEaseInOut |
A fan unfolds from the top edge, the fan axis at the center. | none | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
sineEaseInOut |
A radial hand sweeps clockwise from the upper-left corner. | none | none |
Transition | tweening | Description | Options | Restrictions |
---|---|---|---|---|
linear |
Transition reveals new content by exposing random horizontal lines of pixels. | none | Tweening is always linear. |
Transition | tweening | Description | Options | Restrictions |
---|---|---|---|---|
linear |
Transition reveals new content by exposing random vertical lines of pixels. | none | Tweening is always linear. |
Transition | tweening | Description | Options | Restrictions |
---|---|---|---|---|
linear |
Transition reveals new content by exposing random pixels. | Sets the pixel width in pixels. Default is 2. Minimum is 1. Maximum is 16. | The transition is extremely CPU intensive. Tweening is always linear |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
slide_hide |
backEaseIn |
The old content is pulled out from right to left. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
slide_hide |
backEaseIn |
The old content is pulled out from left to right. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
slide_hide |
backEaseIn |
The old content is pulled out from bottom to top. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
slide_hide |
backEaseIn |
The old content is pulled out from top to bottom. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
iris_circle_out |
backEaseIn |
The old content rotates and scales down to the center. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
iris_circle_in |
backEaseOut |
The new content rotates and scales up from the center. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
iris_square_out |
backEaseIn |
The old content scales down to the center. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
iris_square_in |
backEaseOut |
The new content scales up from the center. | none | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
sineEaseInOut |
The old content is swaped out by new content in multiple horizontal bands from right to left. | Number of horizontal bands. Default is 1. Minimum is 1. Maximum is 100. | IE do not respect the elements shape and performs always a rectangle transition. |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
sineEaseInOut |
The old content is pushed out by new content in multiple horizontal bands from right to left. | Number of horizontal bands. Default is 1. Minimum is 1. Maximum is 100. | IE do not respect the elements shape and performs always a rectangle transition. |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
sineEaseInOut |
The old content is hided out by new content in multiple horizontal bands from right to left. | Number of horizontal bands. Default is 1. Minimum is 1. Maximum is 100. | IE do not respect the elements shape and performs always a rectangle transition. |
Transition | tweening | Description | Options | Restrictions |
---|---|---|---|---|
linear |
Tiles spiral clockwise from the upper-left corner. | #1 Number of rows. Default is 8. Minimum is 1. Maximum is 100. #2 Number of columns. Default is 8. Minimum is 1. Maximum is 100. | Tweening is always linear. |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
barn_vertical |
quadEaseOut |
New content splits from left and right edges and expands toward the center. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
barn_vertical |
quadEaseOut |
Old content splits from center and shrinks toward the left and right edges. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
barn_horizontal |
quadEaseOut |
New content splits from top and bottom edges and expands toward the center. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
barn_horizontal |
quadEaseOut |
Old content splits from center and shrinks toward the top and bottom edges. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
gradientwipe |
circEaseInOut |
A gradient wipe with vertical smearing and movement from top to bottom. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
checkerboard |
linear |
Multiple box shapes expands from the center of each quadrant toward the corners of each quadrant. | #1 Number of horizontal boxes. Default is 8. Minimum is 1. Maximum is 50. #2 Number of vertical boxes. Default is 8. Minimum is 1. Maximum is 50. | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
checkerboard |
linear |
Multiple box shapes expands from the corners of each quadrant toward the center of each quadrant. | #1 Number of horizontal boxes. Default is 8. Minimum is 1. Maximum is 50. #2 Number of vertical boxes. Default is 8. Minimum is 1. Maximum is 50. | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
stretch_hide |
backEaseOut |
New content expands from right edge to left edge. | none | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
backEaseOut |
New content expands from left edge to right edge. | none | IE do not respect the elements shape and performs always a rectangle transition. |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
stretch_hide |
backEaseOut |
New content expands from bottom edge to top edge. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
stretch_hide |
backEaseOut |
New content expands from top edge to bottom edge. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
stretch_push |
backEaseOut |
New content expands from right edge to left edge as old content shrinks from left edge to right edge. | none | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
backEaseOut |
New content expands from left edge to right edge as old content shrinks from right edge to left edge. | none | IE do not respect the elements shape and performs always a rectangle transition. |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
stretch_push |
backEaseOut |
New content expands from bottom edge to top edge as old content shrinks from top edge to bottom edge. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
stretch_push |
backEaseOut |
New content expands from top edge to bottom edge as old content shrinks from bottom edge to top edge. | none | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
backEaseOut |
New content splits and expands from center toward the left and right edges. | none | IE do not respect the elements shape and performs always a rectangle transition. |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
stretch_horizontal |
backEaseOut |
Old content splits and shrinks from the left and right edges toward center. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
stretch_horizontal |
backEaseOut |
New content splits and expands from center toward the top and bottom edges. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
stretch_horizontal |
backEaseOut |
Old content splits and shrinks from the top and bottom edges toward center. | none | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
cubicEaseInOut |
A diagonal sweep from the lower-right corner to the upper-left corner. | none | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
cubicEaseInOut |
A diagonal sweep from the lower-left corner to the upper-right corner. | none | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
cubicEaseInOut |
A diagonal sweep from the upper-right corner to the lower-left corner. | none | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
cubicEaseInOut |
A diagonal sweep from the upper-left corner to the lower-right corner. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
blinds_up |
bounceEaseOut |
The even horizontal bands expands from bottom to top as the odd horizontal bands shrinks from top to bottom. | Number of horizontal bands. Default is 4. Minimum is 2. Maximum is 12. | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
blinds_down |
bounceEaseOut |
The odd horizontal bands expands from top to bottom as the even horizontal bands shrinks from bottom to top. | Number of horizontal bands. Default is 4. Minimum is 2. Maximum is 12. | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
blinds_left |
bounceEaseOut |
The even vertical bands expands from right to left as the odd vertical bands shrinks from left to right. | Number of vertical bands. Default is 4. Minimum is 2. Maximum is 12. | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
blinds_right |
bounceEaseOut |
The odd vertical bands expands from left to right as the even vertical bands shrinks from right to left. | Number of vertical bands. Default is 4. Minimum is 2. Maximum is 12. | none |
Transition | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|
sineEaseInOut |
Multiple radial hands sweep clockwise. | Number of hands. Default is 4. Minimum is 2. Maximum is 20. | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
pixelate |
linear |
The old content is horizontal expanded until the pixel width equals the image width, than faded to the new content which shrinks horizontal until the pixel width equals the pixel height. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
pixelate |
linear |
The old content is vertical expanded until the pixel height equals the image height, than faded to the new content which shrinks vertical until the pixel height equals the pixel width. | none | none |
Transition | tweening | Description | Options | Restrictions |
---|---|---|---|---|
linear |
Tiles move in a horizontal zigzag from the upper-left corner. | #1 Number of rows. Default is 8. Minimum is 1. Maximum is 100. #2 Number of columns. Default is 8. Minimum is 1. Maximum is 100. | Tweening is always linear. |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
fade |
linear |
The new content fades in and scales down to the center. | none | none |
Transition | IE fallback | Default tweening |
Description | Options | Restrictions |
---|---|---|---|---|---|
fade |
linear |
The old content fades out and scales up from the center. | none | none |
cvi_tween_lib.js supports tweening capabilities. TransM.js uses only linear tweening, if this lib is missing or if the browser engine do not support HTML 5 canvas element.
cubicBezierCurve function is compatible with -webkit-transition-timing-function
WYSIWYG-Editor
"cubicBezierCurve gives you the opportunity to define unlimited, individual tweenings".
This timing function is specified using a cubic Bezier curve, which is defined by four control points. The first and last
control points are always set to (0,0) and (1,1), so you just need to specify the two in-between control points. The points
are specified as a percentage of the overall duration (percentage: interpolated as a real number between 0 and 1).
Download the TransM archive and include the following files (consider the order) into your webpage.
<script type="text/javascript" src="cvi_tween_lib.js"></script>
<script type="text/javascript" src="cvi_trans_lib.js"></script>
<script type="text/javascript" src="transm.js"></script>
To add a transm object, just execute the function "transm.add( element, { options } );" to a block-level element.
transm.defaultWidth = 320; //INT 64-1024 (px) canvas width
transm.defaultHeight = 180; //INT 64-1024 (px) canvas height
transm.defaultRadius = 0; //INT|OBJ [0,0,0,0] radius of the corners
transm.defaultName = null; //STR canvas name|id
transm.defaultLayer = null; //STR overlay image path&file
transm.defaultCallback = null; //STR callback function name
transm.defaultData = null; //OBJ array of images
transm.defaultAutoplay = false; //BOOLEAN auto playing at startup
transm.defaultPingpong = false; //BOOLEAN playing pingpong direction
transm.defaultVerbose = false; //BOOLEAN be verbose via console
transm.defaultClearbg = false; //BOOLEAN clear outer elements background
transm.defaultNocache = false; //BOOLEAN VML image caching (IE only)
transm.defaultNopreload = false; //BOOLEAN just in time image loading
transm.defaultFadein = false; //BOOLEAN fade in at startup (not IE)
transm.defaultTimeout = 6; //FLOAT 1-60 (seconds before break off image loading)
transm.defaultTransition = 'random'; //STR transition name
transm.defaultTweening = 'default'; //STR tweening name
transm.defaultCparray = null; //OBJ control points array
transm.defaultDuration = 2; //FLOAT 0.5-5.0 seconds
transm.defaultFps = 30; //INT 15-100 frames per seconds (not IE)
transm.defaultDelay = 5; //FLOAT 0.0-600.0 seconds
transm.defaultMeter = false; //BOOLEAN show delay meter while auto playing
transm.defaultMfgcolor = '#ff0000'; //STR meter foreground color
transm.defaultMbgcolor = '#ffffff'; //STR meter background color
transm.defaultMopacity = 0.75; //FLOAT 0.1-1.0 meter opacity
transm.defaultMsize = 32; //INT 24-min(width,height) meter dimension
transm.defaultMposx = 0; //INT 0-(width-msize) meter position x
transm.defaultMposy = 0; //INT 0-(height-msize) meter position y
data = [{
source: 'path/file.jpg', //STR mandatory image path & file
imgshift: 0.5, //FLT optional image shift value (0==top|left, 0.5==center, 1==bottom|right)
callbefore: null, //STR optional simple callback function name (executes on start of transition)
argbefore: null, //STR|INT optional callback argument (string or number only)
callafter: null, //STR optional simple callback function name (executes on end of transition)
argafter: null, //STR|INT optional callback argument (string or number only)
transition: null, //STR optional transition name
alphaimg: null, //STR optional image path & file (if transition=='alpha')
option1: null, //INT optional transition argument #1 (number only)
option2: null, //INT optional transition argument #2 (number only)
tweening: null, //STR optional tweening name
cparray: null, //STR optional control points array (if tweening=='cubicBezierCurve')
duration: null, //FLT optional duration value (seconds)
delay: null, //FLT optional delay value (seconds)
fps: null, //INT optional frames per second
title: '', //STR optional tooltip
onclick: '', //STR optional js-function
href: '', //STR optional URL
target: '_self', //STR optional target
}, {source: 'image.jpg'}]
STRING = transm.add(element, options);
element == block-level element
options e.g. {width: 128, height: 64, ...}
width == INT 64 - 1024 Default: 320
height == INT 64 - 1024 Default: 180
radius == INT 0 - [0,0,0,0] Default: 0
name == STRING Default: null
layer == STRING Default: null
callback == STRING Default: null
data == OBJECT Default: null
autoplay == BOOLEAN true or false Default: false
pingpong == BOOLEAN true or false Default: false
verbose == BOOLEAN true or false Default: false
clearbg == BOOLEAN true or false Default: false
nocache == BOOLEAN true or false Default: false
nopreload == BOOLEAN true or false Default: false
fadein == BOOLEAN true or false Default: false
timeout == FLOAT 1 - 60 Default: 6
transition == STRING Default: 'random'
tweening == STRING Default: 'default'
cparray == OBJECT Default: [0.25,0.1,0.25,1.0]
duration == FLOAT 0.5 - 5.0 Default: 2
fps == INT 15 - 100 Default: 30
delay == FLOAT 5; //FLOAT 0.0-600.0 seconds
meter == BOOLEAN true or false Default: false
mfgcolor == STRING Default: '#ff0000'
mbgcolor == STRING '#ffffff'
mopacity == FLOAT Default: 0.1 - 1.0 Default: 0.75
msize == INT 24 - min(width,height) Default: 32
mposx == INT 0 - (width-msize) Default: 0
mposy == INT 0 - (height-msize) Default: 0
transm.play(canvas);
(start playing)transm.stop(canvas);
(stop playing)transm.first(canvas);
(show first image)transm.prev(canvas);
(show previous image)transm.show(canvas, image_number);
(show this image)transm.next(canvas);
(show next image)transm.last(canvas);
(show last image)STRING = transm.add(element, options);
(returns current canvas name|id
)OBJECT = transm.info(canvas);
(returns informations about the last transition
)OBJECT.transition == used transition //STR
OBJECT.tweening == used tweening //STR
OBJECT.duration == real duration value //FLT
OBJECT.fps == real fps value //FLT
VALUE = transm.get(canvas, ['busy'|'playing'|'current'|'total'|'transition'|'tweening'|'duration'|'fps']);
VALUE = busy == transition in action //BOL
VALUE = playing == autoplay in action //BOL
VALUE = current == current image number //INT
VALUE = total == no. of all images //INT
VALUE = transition == used transition //STR
VALUE = tweening == used tweening //STR
VALUE = duration == real duration value //FLT
VALUE = fps == real fps value //FLT
FLOAT = transm.version;
STRING = transm.released;
transm.remove(canvas);
var photos = new Array();
photos = [
{source:'images/demo/0.jpg', imgshift:0.75},
{source:'images/demo/1.jpg', title:'dummy', onclick:'alert("dummy")'},
{source:'images/demo/2.jpg', transition:'alpha', alphaimg:'images/alphamask/usflag.jpg'}
]
var opts = {width:655, height:150, radius:[64,64], timeout:3, layer:'images/layer.png', pingpong:true, clearbg:true, delay: 3.0, meter: true, mopacity: .75, mposx: 615, mposy: 110, data:photos, name:'viewer'};
var my_ele = transm.add(document.getElementById('my_div'), opts);
if(typeof $=='undefined') {function $(v) {return(document.getElementById(v));}}
transm.add($('my_div'), opts);
transm.play($('viewer'));
transm.stop($('viewer'));
transm.show($('viewer'), 2);
alert('transm: '+transm.version+' ('+transm.released+')');
transm.remove($('viewer'));
Please read the license before you download transm.js 1.3
Please read the Frequently Asked Questions before you contact the author.
The Internet Explorer implementation has a few system immanent limitations. The problem is that VML images don't support the onload event (or onreadystate). Also IE doesn't cache VML images across page loads. Notice the long delay on page reload! If you watch IE's http traffic (say using Fiddler), you'll see that IE requests each image again. So for every image, TransM.js needs to download it twice. Even the images are in browser cache, VML still need to connect server and get a 304 response. I've found a way to cache VML images. IE 6/7/8 works well with the argument nocache: false, but if you get in conflict with it you can set it to nocache: true. With setting nocache: true IE needs to cycle one time through the play loop, before all images are cached. The number of transition types is limited to 51 and the tweening is always linear. In opposite to the frame accurate transitions, Internet Explorer transitions are time accurate. That is why IE do not support the fps parameter.
Version 1.3
Please leave any comments at this contact formular.
transm.js and cvi_trans_lib.js are distributed under the Netzgestade Non-commercial Software License Agreement.
License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license).
This license equals neither "open source" nor "public domain".
There are also Commercial Software Licenses available.