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.

alpha

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).

barn_horizontal_in

Transition	Default tweening	Description	Options	Restrictions
	quadEaseOut	Two horizontal lines expands from top and bottom edges toward the center.	none	none

barn_horizontal_out

Transition	Default tweening	Description	Options	Restrictions
	quadEaseOut	A central, horizontal line splits and expands toward the top and bottom edges.	none	none

barn_vertical_in

Transition	Default tweening	Description	Options	Restrictions
	quadEaseOut	Two vertical lines expands from left and right edges toward the center.	none	none

barn_vertical_out

Transition	Default tweening	Description	Options	Restrictions
	quadEaseOut	A central, vertical line splits and expands toward the left and right edges.	none	none

blinds_left

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

blinds_right

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

blinds_up

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

blinds_down

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

blur

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.

checkerboard_left

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

checkerboard_right

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

checkerboard_up

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

checkerboard_down

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

circles_in

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

circles_out

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

color

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

copy_left

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	gradientwipe	linear	A Xerox like copy procedure with horizontal movement from right to left.	none	none

copy_right

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	gradientwipe	linear	A Xerox like copy procedure with horizontal movement from left to right.	none	none

copy_up

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	gradientwipe	linear	A Xerox like copy procedure with vertical movement from bottom to top.	none	none

copy_down

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	gradientwipe	linear	A Xerox like copy procedure with vertical movement from top to bottom.	none	none

corner_lefttop_in

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	radialwipe	bounceEaseOut	Image rotates clockwise in from the upper-left corner.	none	none

corner_righttop_in

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	radialwipe	bounceEaseOut	Image rotates counter-clockwise in from the upper-right corner.	none	none

corner_leftbottom_in

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	radialwipe	bounceEaseOut	Image rotates clockwise in from the lower-left corner.	none	none

corner_rightbottom_in

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	radialwipe	bounceEaseOut	Image rotates counter-clockwise in from the lower-right corner.	none	none

corner_lefttop_out

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	radialwipe	bounceEaseOut	Image rotates clockwise out from the upper-left corner.	none	none

corner_righttop_out

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	radialwipe	bounceEaseOut	Image rotates counter-clockwise out from the upper-right corner.	none	none

corner_leftbottom_out

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	radialwipe	bounceEaseOut	Image rotates clockwise out from the lower-left corner.	none	none

corner_rightbottom_out

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	radialwipe	bounceEaseOut	Image rotates counter-clockwise out from the lower-right corner.	none	none

curl_horizontal

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

curl_vertical

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

cut

Transition	Default tweening	Description	Options	Restrictions
	linear	A classic hard cut wipe.	none	No tweening available. Transition starts immediately.

fade

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

flash

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

gradientwipe_left

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

gradientwipe_right

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

gradientwipe_up

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

gradientwipe_down

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

inset_leftup

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

inset_rightup

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

inset_leftdown

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

inset_rightdown

Transition	Default tweening	Description	Options	Restrictions
	cubicEaseInOut	A box expands from the upper-left corner to the lower-right corner.	none	none

iris_cross_in | iris_cross_out

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

iris_plus_in | iris_plus_out

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

iris_square_in | iris_square_out

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

iris_circle_in | iris_circle_out

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

iris_diamond_in | iris_diamond_out

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

iris_star_in | iris_star_out

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

pixelate

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.

pull_left

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	slide_hide	backEaseOut	The new content is pulled in from right to left.	none	none

pull_right

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	slide_hide	backEaseOut	The new content is pulled in from left to right.	none	none

pull_up

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	slide_hide	backEaseOut	The new content is pulled in from bottom to top.	none	none

pull_down

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	slide_hide	backEaseOut	The new content is pulled in from top to bottom.	none	none

push_left

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

push_right

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

push_up

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

push_down

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

radialgradient

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	fade	linear	A circle gradient expands from the center in two steps.	none	none

radialwipe_clock

Transition	Default tweening	Description	Options	Restrictions
	sineEaseInOut	A radial hand sweeps clockwise from the twelve o'clock position.	none	none

radialwipe_wedge

Transition	Default tweening	Description	Options	Restrictions
	sineEaseInOut	A fan unfolds from the top edge, the fan axis at the center.	none	none

radialwipe_radial

Transition	Default tweening	Description	Options	Restrictions
	sineEaseInOut	A radial hand sweeps clockwise from the upper-left corner.	none	none

randombars_horizontal

Transition	tweening	Description	Options	Restrictions
	linear	Transition reveals new content by exposing random horizontal lines of pixels.	none	Tweening is always linear.

randombars_vertical

Transition	tweening	Description	Options	Restrictions
	linear	Transition reveals new content by exposing random vertical lines of pixels.	none	Tweening is always linear.

randomdissolve

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

reveal_left

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	slide_hide	backEaseIn	The old content is pulled out from right to left.	none	none

reveal_right

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	slide_hide	backEaseIn	The old content is pulled out from left to right.	none	none

reveal_up

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	slide_hide	backEaseIn	The old content is pulled out from bottom to top.	none	none

reveal_down

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	slide_hide	backEaseIn	The old content is pulled out from top to bottom.	none	none

rotate_in

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	iris_circle_out	backEaseIn	The old content rotates and scales down to the center.	none	none

rotate_out

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	iris_circle_in	backEaseOut	The new content rotates and scales up from the center.	none	none

scale_in

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	iris_square_out	backEaseIn	The old content scales down to the center.	none	none

scale_out

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	iris_square_in	backEaseOut	The new content scales up from the center.	none	none

slide_swap

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.

slide_push

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.

slide_hide

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.

spiral

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.

split_horizontal_in

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

split_horizontal_out

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

split_vertical_in

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

split_vertical_out

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

smudge

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	gradientwipe	circEaseInOut	A gradient wipe with vertical smearing and movement from top to bottom.	none	none

squares_in

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

squares_out

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

stretch_hide_left

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	stretch_hide	backEaseOut	New content expands from right edge to left edge.	none	none

stretch_hide_right

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.

stretch_hide_up

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	stretch_hide	backEaseOut	New content expands from bottom edge to top edge.	none	none

stretch_hide_down

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	stretch_hide	backEaseOut	New content expands from top edge to bottom edge.	none	none

stretch_push_left

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

stretch_push_right

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.

stretch_push_up

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

stretch_push_down

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

stretch_horizontal_in

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.

stretch_horizontal_out

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

stretch_vertical_in

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

stretch_vertical_out

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

strips_leftup

Transition	Default tweening	Description	Options	Restrictions
	cubicEaseInOut	A diagonal sweep from the lower-right corner to the upper-left corner.	none	none

strips_rightup

Transition	Default tweening	Description	Options	Restrictions
	cubicEaseInOut	A diagonal sweep from the lower-left corner to the upper-right corner.	none	none

strips_leftdown

Transition	Default tweening	Description	Options	Restrictions
	cubicEaseInOut	A diagonal sweep from the upper-right corner to the lower-left corner.	none	none

strips_rightdown

Transition	Default tweening	Description	Options	Restrictions
	cubicEaseInOut	A diagonal sweep from the upper-left corner to the lower-right corner.	none	none

turn_horizontal_up

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

turn_horizontal_down

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

turn_vertical_left

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

turn_vertical_right

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

wheel

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

wrench_horizontal

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

wrench_vertical

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

zigzag

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.

zoom_in

Transition	IE fallback	Default tweening	Description	Options	Restrictions
	fade	linear	The new content fades in and scales down to the center.	none	none

zoom_out

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.

linear

linear

sine

EaseIn

sine

EaseOut

sine

EaseInOut

quad

EaseIn

quad

EaseOut

quad

EaseInOut

cubic

EaseIn

cubic

EaseOut

cubic

EaseInOut

quart

EaseIn

quart

EaseOut

quart

EaseInOut

quint

EaseIn

quint

EaseOut

quint

EaseInOut

expo

EaseIn

expo

EaseOut

expo

EaseInOut

circ

EaseIn

circ

EaseOut

circ

EaseInOut

bounce

EaseIn

bounce

EaseOut

bounce

EaseInOut

back

EaseIn

back

EaseOut

back

EaseInOut

elastic

EaseIn

elastic

EaseOut

elastic

EaseInOut

cubic

BezierCurve

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.

Set defaults

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 format

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'}]

Add canvas

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

(Advice: By adding a canvas to a block-level element, the former content of the element will be overwritten)

Remote control canvas

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)

Get some informations

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;

Remove canvas

transm.remove(canvas);

Examples

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

• Added two new transition effects to library

• Added support for Internet Explorer 9

• Added just in time image loading feature

• Initial Release

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.

YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE.
IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.

•   home  
•   developer  
•   laboratory  
•   mapzoom.js
  Supports zoom & pan for pixel & vector data! It's a conceptual combination of ShiftZoom and Mapper. Requires no plugin/extension or any other external resource!
•   shiftzoom.js
  Supports zoom & pan functionality! The library allows you to add/remove zoom and pan functionality to oversized images on your webpages. Requires no plugin/extension or any other external resource!
•   snapfit.js
  Supports jigsaw puzzle functionality! The script allows you to add jigsaw puzzles with individual options to images on your webpages. Requires no plugin/extension or any other external resource!
•   booklet.js
  Simulates an authentic looking album or book presenting photos, images and pictures of all sizes and with any aspect ratio. Includes covering, navigation, information, linking and auto generated visual table of contents. Requires no plugin/extension or any other external resource!
•   tripleb.js
  Simulates the CSS 3 beautifying features border-radius, box-shadow and background-gradient on your webpages. Requires no plugin/extension or any other external resource!
•   loupe.js
  Simulates an authentic looking magnifying glass! The script allows you to add a loupe for magnifying (inc. start viewpoint) to an image on your webpage. Requires no plugin/extension but one external resource image!
•   busy.js
  Supports native spinner animations! The library allows you to add/remove loading indicators to the viewport and to block-level elements on your webpages. Requires no plugin/extension or any other external resource!
•   mapper.js
  Emulates native area highlighting! The script allows you to add automatic area highlighting to image maps on your webpages (inc. export to SVG). Requires no plugin/extension or any other external resource!
•   glossy.js
  Simulates a glossy shaded and beveled button look! The script allows you to add individual corners, shadings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   slided.js
  Simulates a slide frame look including gradients! The script allows you to add individual colors, shadings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   corner.js
  Simulates a whole bunch of image effects! The script allows you to add individual corners, shadings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   gauge.js
  Supports programmable gauges! The script allows you to add gauges (with shading and reflection) to your webpages. Requires no plugin/extension or any other external resource!
•   filmed.js
  Simulates a film strip look including reflection! The script allows you to add individual colors, shining and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   edge.js
  Simulates masked image edges! The script allows you to add individual masks (inc. inbuilt mask) to images on your webpages. Requires no plugin/extension but zero or more external mask images!
•   sphere.js
  Simulates a spherical image effect! The script allows you to add an spherical picture effect with individual zooming, shading, shining, transparency and colors to images on your webpages. Requires no plugin/extension or any other external resource!
•   bevel.js
  Simulates a whole bunch of image effects! The script allows you to add bevels with individual glowing, shading and shining to images on your webpages. Requires no plugin/extension or any other external resource!
•   curl.js
  Simulates a page curl image effect! The script allows you to add curls with individual paperback color, shadow opacity and size to images on your webpages. Requires no plugin/extension or any other external resource!
•   instant.js
  Simulates an instant picture look including tilt! The script allows you to add individual colors, tiltings and shadows to images on your webpages. Requires no plugin/extension or any other external resource!
•   reflex.js
  Simulates a Cover Flow^™ image effect! The script allows you to add individual borders, tiltings and reflections to images on your webpages. Requires no plugin/extension or any other external resource! *Cover Flow is a trademark of Apple Inc.