NOTE: advanced property
NOTE: use the code modification | javascript | before property to set additional variables (see below)
•••• syntax: function return
-----
slideshow | aspect
enable each individual slideshow image to maintains it's original aspect ratio
NOTE: if enabled the property custom | overflow is surpassed (=hidden)
NOTE: this property is completely integrated with module | reposition
•••• var: string
slideshow | aspect clip
set the clip point on which the aspect ratio is maintained
if the value is 1 the original aspect ratio is always maintained - (=image clips)
at higher values the images will contract , maintain aspect, until the aspect ratio can not be maintained any longer
at this clip point the value set here will determine the amount of distortion (width compression) that will occur to the image
CON: the higher the value the greater the distortion after the clipping point
PRO: the higher the value the more the image remains in view after the clipping point
•••• var: non-string
-----
run on load
run on load enables or disables this module to run on page load
run on call
run on call is the function name we can give this current function
we can call this function to occur ie. by using a callback | function
for an in depth on callback and run on call see here
code modification | function add
add additional cycle functions (see also CUSTOMIZE EFFECT ... here)
NOTE: code start with a comma
code modification | variable
add a function variable ie. Call_Cycle_1(myVariable)
this function is beyond the scope of this manual see here
code modification | javascript | after
add javascript, further enhancing this function by adding custom code
this function is beyond the scope of this manual see here
code modification | javascript | before
add javascript, further enhancing this function by adding custom code
this function is beyond the scope of this manual see here
NOTE: use the code modification | javascript | before property to set additional variables (see below)
•••• syntax: function return
-----
slideshow | aspect
enable each individual slideshow image to maintains it's original aspect ratio
NOTE: if enabled the property custom | overflow is surpassed (=hidden)
NOTE: this property is completely integrated with module | reposition
•••• var: string
slideshow | aspect clip
set the clip point on which the aspect ratio is maintained
if the value is 1 the original aspect ratio is always maintained - (=image clips)
at higher values the images will contract , maintain aspect, until the aspect ratio can not be maintained any longer
at this clip point the value set here will determine the amount of distortion (width compression) that will occur to the image
CON: the higher the value the greater the distortion after the clipping point
PRO: the higher the value the more the image remains in view after the clipping point
•••• var: non-string
-----
run on load
run on load enables or disables this module to run on page load
run on call
run on call is the function name we can give this current function
we can call this function to occur ie. by using a callback | function
for an in depth on callback and run on call see here
code modification | function add
add additional cycle functions (see also CUSTOMIZE EFFECT ... here)
NOTE: code start with a comma
code modification | variable
add a function variable ie. Call_Cycle_1(myVariable)
this function is beyond the scope of this manual see here
code modification | javascript | after
add javascript, further enhancing this function by adding custom code
this function is beyond the scope of this manual see here
code modification | javascript | before
add javascript, further enhancing this function by adding custom code
this function is beyond the scope of this manual see here
CUSTOM FX - TILES:
custom tiles | target
set custom tiles target - this property targets which tiles fx is affected by the custom tiles properties
this property is very versatile, target all or none or a specific tiles fx or even multiple tiles fxs
all = target all tiles fx
none = target none
blindX = target only this tiles fx
blindX,blindY = target only these tiles fxs
•••• var: string
custom tiles | columns
set custom columns amount
NOTE: not all tiles effect can/should be changed by this property - ie. boxSnake, columns + rows is locked to 5
•••• var: non-string
custom tiles | rows
set custom rows amount
NOTE: not all tiles effect can/should be changed by this property - ie. boxSnake, columns + rows is locked to 5
•••• var: non-string
custom tiles | css before
set custom css for the tiles before the transition occurs
•••• var: non-string
custom tiles | delay
set custom animation delay for each tile
•••• var: non-string
custom tiles | order
set custom animation order for the tiles
custom tiles | target
set custom tiles target - this property targets which tiles fx is affected by the custom tiles properties
this property is very versatile, target all or none or a specific tiles fx or even multiple tiles fxs
all = target all tiles fx
none = target none
blindX = target only this tiles fx
blindX,blindY = target only these tiles fxs
•••• var: string
custom tiles | columns
set custom columns amount
NOTE: not all tiles effect can/should be changed by this property - ie. boxSnake, columns + rows is locked to 5
•••• var: non-string
custom tiles | rows
set custom rows amount
NOTE: not all tiles effect can/should be changed by this property - ie. boxSnake, columns + rows is locked to 5
•••• var: non-string
custom tiles | css before
set custom css for the tiles before the transition occurs
•••• var: non-string
custom tiles | delay
set custom animation delay for each tile
•••• var: non-string
custom tiles | order
set custom animation order for the tiles
__________________________________________________________________________
more info on module | cycle see here Overview
more info on module | cycle see here Online Tutorials
more info on module | cycle see here Overview
more info on module | cycle see here Online Tutorials
ADVANCED - ROUGH - EXAMPLE: return the order of tiles animation
VARIABLE BEFORE:
var tilesOrder = [0, 5, 1, 10, 6, 2, 15, 11, 7, 3, 14, 12, 8, 4, 9, 13]; <--- 16 tiles
TILES SETUP:
custom tiles | columns = 4 <-----------------------------------+--- 4 x 4 = 16 tiles
custom tiles | rows = 4 <-----------------------------------+
ORDER SETUP (RETURN):
custom tiles | columns = function(i) {
return tilesOrder[i]
};
VARIABLE BEFORE:
var tilesOrder = [0, 5, 1, 10, 6, 2, 15, 11, 7, 3, 14, 12, 8, 4, 9, 13]; <--- 16 tiles
TILES SETUP:
custom tiles | columns = 4 <-----------------------------------+--- 4 x 4 = 16 tiles
custom tiles | rows = 4 <-----------------------------------+
ORDER SETUP (RETURN):
custom tiles | columns = function(i) {
return tilesOrder[i]
};
b5.3
b5.3
MODULE CYCLE - PROPERTIES
PLUGIN
identifier
1. identifier is used to write down notes of animations, actions and anything we find important to make note of
identifier is a visual reference
2. identifier also provides a quick overview of the function structure flow
STRUCTURE: function (e) { javascript before - init - callback - javascript after }
selector
target an object by id (#) or class (.) or element
the full range on selectors is beyond the scope of this manual
for an in depth on selectors simplified see here
•••• var: string
SETTINGS:
fx
with fx we can set the type of transition effect to execute
the full list of cycle transitions is:
blindX, blindY, blindZ
curtainX, curtainY
fade, fadeZoom, zoom
growX, growY
scrollDown, scrollUp, scrollLeft, scrollRight, scrollHorz, scrollVert
slideX, slideY
turnDown, turnUp, turnLeft, turnRight
cover, uncover, shuffle, toss, wipe
custom, allEffects, tiles
NOTE: multiple transitions can be linked together ( ie. blindX,fadeZoom,turnUp,slideX ... )
NOTE: set a tiles type fx with the property fx | tiles type - see next property
•••• var: string
tiles | fx
set tiles fx type
the full list of tiles cycle transitions is:
blindX, blindY
centerX, center Y
dropX, dropY
boxLeafs1, boxLeafs2, boxRandom, boxSnake
allEffects
NOTE: set the property fx (see above) to tiles to use this effect type
NOTE: multiple tiles transitions can be linked together ( ie. blindX,boxRandom,boxSnake ... )
•••• var: string
tiles | fade easing
set easing effect for the tiles slide transition
easing effect will add non-linear movement to animation, movement like acceleration, bounce, elastic etc
the full list of easing effects is:
back-in, back-out, back-inout
bounce-in, bounce-out, bounce-inout
circ-in, circ-out, circ-inout
cubic-in, cubic-out, cubic-inout
elas-in, elas-out, elas-inout
expo-in, expo-out, expo-inout
quad-in, quad-out, quad-inout
quart-in, quart-out, quart-inout
quint-in, quint-out, quint-inout
sine-in, sine-out, sine-inout
swing, linear
NOTE: for a reference on easing effect see here
•••• var: string
first slide
set the first slide to start the cycle from
NOTE: if the property randomize is set to false
•••• var: non-string
no wrap
prevent the cycle from looping back to start
NOTE: if the property randomize is set to false
•••• var: non-string
backward
cycle starts at last slide and cycles in reverse direction
NOTE: if the property randomize is set to false
•••• var: non-string
randomize
randomize the cycle slide order
•••• var: non-string
autostop
cycle stops after the amount set by the property autostop count is reached
•••• var: non-string
autostop count
if the property autostop is true the cycle will stop after this value is matched
•••• var: non-string
continuous
if continuous is set to true the next transition will start instant at transition end, this overrides the animation | timer (see below)
NOTE: an event occurrence will stop this continues cycle
•••• var: non-string
first slide delay
set an extra delay time before the first slide starts, negative values can be used
•••• var: non-string
animation | duration
set duration of the transition effect
NOTE: this value can not be higher then the animation | timer value (see below)
if set higher, this property will automatically revert to the same speed as the animation | timer
•••• var: non-string
animation | easing
set easing effect for the slide transition
easing effect will add non-linear movement to animation, movement like acceleration, bounce, elastic etc
the full list of easing effects is:
back-in, back-out, back-inout
bounce-in, bounce-out, bounce-inout
circ-in, circ-out, circ-inout
cubic-in, cubic-out, cubic-inout
elas-in, elas-out, elas-inout
expo-in, expo-out, expo-inout
quad-in, quad-out, quad-inout
quart-in, quart-out, quart-inout
quint-in, quint-out, quint-inout
sine-in, sine-out, sine-inout
swing, linear
NOTE: for a reference on easing effect see here
•••• var: string
autoplay | timer
set autoplay time to next slide (0=OFF)
•••• var: non-string
autoplay | timer text (ID)
set the selector of a Webbuilder Text object to act as a visual display percentage timer of the autoplay | timer
•••• var: string
effect | sync
the in and out of the transition effect will overlap if sync is set to true , else they will occur in sequence
•••• var: non-string
effect | reverse
if the effect allows it , the transition effect will execute in reverse direction
EXAMPLE FX: scrollHorz - scrollVert - shuffle
•••• var: non-string
effect | randomize
randomize the cycle fx order (if multiple effect are used)
•••• var: non-string
effect | shuffle
set the direction of the shuffle transition by setting the left and top attributes
•••• var: non-string
cleartype fix 1 & cleartype fix 2
tries to fix IE deformation of text and image display (1.filter - 2.background fix)
•••• var: non-string
event | fast time
set preceding speed of the effect transition on event occurrence, this will override the animation | speed time (0=OFF)
NOTE: 01. animation | easing will be disabled if used - 02. this property does not work with tiles effects
•••• var: non-string
event | animation stop
if set to true the current animation will stop instant on event occur and continue into the next transition
•••• var: non-string
event | pause container
if set to true the cycle will pause on mouseover on the container (=the slider)
•••• var: non-string
EXTERNAL CONTROL:
control | play
set the selector of an object to act as an autoplay play button
•••• var: string
control | stop
set the selector of an object to act as an autoplay stop button
•••• var: string
control | text (ID)
set the selector of a Webbuilder Text object to act as a visual display of the autoplay - play / stop state
•••• var: string
control | text | play
set text for the play state
•••• var: string
control | text | stop
set text for the stop state
•••• var: string
EXTERNAL CONTROL - PAGER:
pager | pagers
set the selectors of the objects that will act as pagers for the slides, either a string or a Webbuilder component
string:
each subsequent object added is matched by it's subsequent slide
ie. #Shape1,#Shape2,#Shape3 = Slide1 - Slide 2 - Slide 3 etc
Webbuilder component:
01. NavigationBar, 02. TabMenu or 03. PhotoGallery can be used
each entry of the component will match it's subsequent slide
ie. Navigation.button1 - Navigation.button 2 - Navigation.button 3 = Slide1 - Slide 2 - Slide 3 etc
•••• var: string
pager | active (ID)
set the selector of a Webbuilder Image object that will act as active pager for the pagers (=Image,Shape,ClipArt,TextArt)
NOTE: the active pager is disabled when a Webbuilder component (NavigationBar/TabMenu/PhotoGallery) is used as pagination
•••• var: string
pager | active | duration
set the animation speed of the active pager
•••• var: non-string
pager | active | easing
set easing effect for the active pager
easing effect will add non-linear movement to animation, movement like acceleration, bounce, elastic etc
the full list of easing effects is:
back-in, back-out, back-inout
bounce-in, bounce-out, bounce-inout
circ-in, circ-out, circ-inout
cubic-in, cubic-out, cubic-inout
elas-in, elas-out, elas-inout
expo-in, expo-out, expo-inout
quad-in, quad-out, quad-inout
quart-in, quart-out, quart-inout
quint-in, quint-out, quint-inout
sine-in, sine-out, sine-inout
swing, linear
NOTE: for a reference on easing effect see here
•••• var: string
pager | active | z-index
set the z-index of the active pager, most likely a high value to stay on top of the pagers
•••• var: string
pager | pause pager
if set to true the cycle will pause on mouseover of the pagers
•••• var: non-string
pager | event type
set the event type for the pager navigations to execute
the full list of events is:
click, mouseover, mouseout, mouseenter, mouseleave, mouseup, mousedown, mousemove
•••• var: string
EXTERNAL CONTROL - NEXT/PREVIOUS:
next-prev | next
set a selector for an object to act as a next button event
•••• var: string
next-prev | prev
set a selector for an object to act as a previous button event
•••• var: string
next-prev | event type
set the event type for the next-prev navigation
the full list of events is:
click, mouseover, mouseout, mouseenter, mouseleave, mouseup, mousedown, mousemove
•••• var: string
-----
title | text (ID)
set selector of a Webbuilder Text object used as optional slide title, the title info is taken from the image title (=Alternate Text)
•••• var: string
1. identifier is used to write down notes of animations, actions and anything we find important to make note of
identifier is a visual reference
2. identifier also provides a quick overview of the function structure flow
STRUCTURE: function (e) { javascript before - init - callback - javascript after }
selector
target an object by id (#) or class (.) or element
the full range on selectors is beyond the scope of this manual
for an in depth on selectors simplified see here
•••• var: string
SETTINGS:
fx
with fx we can set the type of transition effect to execute
the full list of cycle transitions is:
blindX, blindY, blindZ
curtainX, curtainY
fade, fadeZoom, zoom
growX, growY
scrollDown, scrollUp, scrollLeft, scrollRight, scrollHorz, scrollVert
slideX, slideY
turnDown, turnUp, turnLeft, turnRight
cover, uncover, shuffle, toss, wipe
custom, allEffects, tiles
NOTE: multiple transitions can be linked together ( ie. blindX,fadeZoom,turnUp,slideX ... )
NOTE: set a tiles type fx with the property fx | tiles type - see next property
•••• var: string
tiles | fx
set tiles fx type
the full list of tiles cycle transitions is:
blindX, blindY
centerX, center Y
dropX, dropY
boxLeafs1, boxLeafs2, boxRandom, boxSnake
allEffects
NOTE: set the property fx (see above) to tiles to use this effect type
NOTE: multiple tiles transitions can be linked together ( ie. blindX,boxRandom,boxSnake ... )
•••• var: string
tiles | fade easing
set easing effect for the tiles slide transition
easing effect will add non-linear movement to animation, movement like acceleration, bounce, elastic etc
the full list of easing effects is:
back-in, back-out, back-inout
bounce-in, bounce-out, bounce-inout
circ-in, circ-out, circ-inout
cubic-in, cubic-out, cubic-inout
elas-in, elas-out, elas-inout
expo-in, expo-out, expo-inout
quad-in, quad-out, quad-inout
quart-in, quart-out, quart-inout
quint-in, quint-out, quint-inout
sine-in, sine-out, sine-inout
swing, linear
NOTE: for a reference on easing effect see here
•••• var: string
first slide
set the first slide to start the cycle from
NOTE: if the property randomize is set to false
•••• var: non-string
no wrap
prevent the cycle from looping back to start
NOTE: if the property randomize is set to false
•••• var: non-string
backward
cycle starts at last slide and cycles in reverse direction
NOTE: if the property randomize is set to false
•••• var: non-string
randomize
randomize the cycle slide order
•••• var: non-string
autostop
cycle stops after the amount set by the property autostop count is reached
•••• var: non-string
autostop count
if the property autostop is true the cycle will stop after this value is matched
•••• var: non-string
continuous
if continuous is set to true the next transition will start instant at transition end, this overrides the animation | timer (see below)
NOTE: an event occurrence will stop this continues cycle
•••• var: non-string
first slide delay
set an extra delay time before the first slide starts, negative values can be used
•••• var: non-string
animation | duration
set duration of the transition effect
NOTE: this value can not be higher then the animation | timer value (see below)
if set higher, this property will automatically revert to the same speed as the animation | timer
•••• var: non-string
animation | easing
set easing effect for the slide transition
easing effect will add non-linear movement to animation, movement like acceleration, bounce, elastic etc
the full list of easing effects is:
back-in, back-out, back-inout
bounce-in, bounce-out, bounce-inout
circ-in, circ-out, circ-inout
cubic-in, cubic-out, cubic-inout
elas-in, elas-out, elas-inout
expo-in, expo-out, expo-inout
quad-in, quad-out, quad-inout
quart-in, quart-out, quart-inout
quint-in, quint-out, quint-inout
sine-in, sine-out, sine-inout
swing, linear
NOTE: for a reference on easing effect see here
•••• var: string
autoplay | timer
set autoplay time to next slide (0=OFF)
•••• var: non-string
autoplay | timer text (ID)
set the selector of a Webbuilder Text object to act as a visual display percentage timer of the autoplay | timer
•••• var: string
effect | sync
the in and out of the transition effect will overlap if sync is set to true , else they will occur in sequence
•••• var: non-string
effect | reverse
if the effect allows it , the transition effect will execute in reverse direction
EXAMPLE FX: scrollHorz - scrollVert - shuffle
•••• var: non-string
effect | randomize
randomize the cycle fx order (if multiple effect are used)
•••• var: non-string
effect | shuffle
set the direction of the shuffle transition by setting the left and top attributes
•••• var: non-string
cleartype fix 1 & cleartype fix 2
tries to fix IE deformation of text and image display (1.filter - 2.background fix)
•••• var: non-string
event | fast time
set preceding speed of the effect transition on event occurrence, this will override the animation | speed time (0=OFF)
NOTE: 01. animation | easing will be disabled if used - 02. this property does not work with tiles effects
•••• var: non-string
event | animation stop
if set to true the current animation will stop instant on event occur and continue into the next transition
•••• var: non-string
event | pause container
if set to true the cycle will pause on mouseover on the container (=the slider)
•••• var: non-string
EXTERNAL CONTROL:
control | play
set the selector of an object to act as an autoplay play button
•••• var: string
control | stop
set the selector of an object to act as an autoplay stop button
•••• var: string
control | text (ID)
set the selector of a Webbuilder Text object to act as a visual display of the autoplay - play / stop state
•••• var: string
control | text | play
set text for the play state
•••• var: string
control | text | stop
set text for the stop state
•••• var: string
EXTERNAL CONTROL - PAGER:
pager | pagers
set the selectors of the objects that will act as pagers for the slides, either a string or a Webbuilder component
string:
each subsequent object added is matched by it's subsequent slide
ie. #Shape1,#Shape2,#Shape3 = Slide1 - Slide 2 - Slide 3 etc
Webbuilder component:
01. NavigationBar, 02. TabMenu or 03. PhotoGallery can be used
each entry of the component will match it's subsequent slide
ie. Navigation.button1 - Navigation.button 2 - Navigation.button 3 = Slide1 - Slide 2 - Slide 3 etc
•••• var: string
pager | active (ID)
set the selector of a Webbuilder Image object that will act as active pager for the pagers (=Image,Shape,ClipArt,TextArt)
NOTE: the active pager is disabled when a Webbuilder component (NavigationBar/TabMenu/PhotoGallery) is used as pagination
•••• var: string
pager | active | duration
set the animation speed of the active pager
•••• var: non-string
pager | active | easing
set easing effect for the active pager
easing effect will add non-linear movement to animation, movement like acceleration, bounce, elastic etc
the full list of easing effects is:
back-in, back-out, back-inout
bounce-in, bounce-out, bounce-inout
circ-in, circ-out, circ-inout
cubic-in, cubic-out, cubic-inout
elas-in, elas-out, elas-inout
expo-in, expo-out, expo-inout
quad-in, quad-out, quad-inout
quart-in, quart-out, quart-inout
quint-in, quint-out, quint-inout
sine-in, sine-out, sine-inout
swing, linear
NOTE: for a reference on easing effect see here
•••• var: string
pager | active | z-index
set the z-index of the active pager, most likely a high value to stay on top of the pagers
•••• var: string
pager | pause pager
if set to true the cycle will pause on mouseover of the pagers
•••• var: non-string
pager | event type
set the event type for the pager navigations to execute
the full list of events is:
click, mouseover, mouseout, mouseenter, mouseleave, mouseup, mousedown, mousemove
•••• var: string
EXTERNAL CONTROL - NEXT/PREVIOUS:
next-prev | next
set a selector for an object to act as a next button event
•••• var: string
next-prev | prev
set a selector for an object to act as a previous button event
•••• var: string
next-prev | event type
set the event type for the next-prev navigation
the full list of events is:
click, mouseover, mouseout, mouseenter, mouseleave, mouseup, mousedown, mousemove
•••• var: string
-----
title | text (ID)
set selector of a Webbuilder Text object used as optional slide title, the title info is taken from the image title (=Alternate Text)
•••• var: string
CALLBACK:
callback | before & callback | after
add a function before or after slide occur
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here
• fn: before/after: function (curr,next,opts,fw) { }
curr = returns current slide/object
next = returns next slide/object
opts = get and set internal options
fw = returns slide direction - 1=forward/0=backward
callback | end
add a function at cycle end
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here
• fn: end: function (opts) { }
opts = get and set internal options
callback | pager
add a function at pager event occur
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here
• fn: onPagerEvent: function (zeroBasedSlideIndex,slideElement) { }
zeroBasedSlideIndex = returns current pager/index - zeroBased
slideElement = returns current slide/object
callback | prev - next
add a function at previous and next event occur
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here
• fn: onPrevNextEvent: function (isNext,zeroB,slideE) { }
isNext = returns true if event is next
zeroB = returns current pager/index - zeroBased
slideE = returns current slide/object
callback | before & callback | after
add a function before or after slide occur
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here
• fn: before/after: function (curr,next,opts,fw) { }
curr = returns current slide/object
next = returns next slide/object
opts = get and set internal options
fw = returns slide direction - 1=forward/0=backward
callback | end
add a function at cycle end
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here
• fn: end: function (opts) { }
opts = get and set internal options
callback | pager
add a function at pager event occur
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here
• fn: onPagerEvent: function (zeroBasedSlideIndex,slideElement) { }
zeroBasedSlideIndex = returns current pager/index - zeroBased
slideElement = returns current slide/object
callback | prev - next
add a function at previous and next event occur
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here
• fn: onPrevNextEvent: function (isNext,zeroB,slideE) { }
isNext = returns true if event is next
zeroB = returns current pager/index - zeroBased
slideE = returns current slide/object
CUSTOM FX:
custom | anim out
set the animate out attributes
•••• var: non-string
custom | css before
set css for the slide before the transition occurs, is BEFORE animate in
•••• var: non-string
custom | anim in
set the animate in attributes
•••• var: non-string
custom | css after
set the css for the slide after the transition occurs, is AFTER animate in
custom | anim out
set the animate out attributes
•••• var: non-string
custom | css before
set css for the slide before the transition occurs, is BEFORE animate in
•••• var: non-string
custom | anim in
set the animate in attributes
•••• var: non-string
custom | css after
set the css for the slide after the transition occurs, is AFTER animate in
NOTE: set the property fx to custom to initialize a custom fx
NOTE: if no custom fx is used set these custom | ... properties to not used
•••• var: non-string
NOTE: if no custom fx is used set these custom | ... properties to not used
•••• var: non-string
custom | overflow
set behavior of the cycle holder when content is passing it's border
•••• var: string
set behavior of the cycle holder when content is passing it's border
•••• var: string
EXAMPLE CUSTOM FX:
fx : custom <--- initialize custom
...
custom | anim out : width:400,height:0,left:200
custom | css before : width:400,height:0,left:200
custom | anim in : width:140,height:200,left:0
custom | css after :
custom | overflow : hidden
fx : custom <--- initialize custom
...
custom | anim out : width:400,height:0,left:200
custom | css before : width:400,height:0,left:200
custom | anim in : width:140,height:200,left:0
custom | css after :
custom | overflow : hidden