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
NOTE: the OnLoad module has 2 selectors (2 animators per entry ANIMATOR 1 and ANIMATOR 2)
NOTE: use of window or document or parent or this as selector will automatically disable tags on the selector (=non-string)
NOTE: setting this property to not used prevents code for this selector from being generated
•••• var: string | •••• var: non-string ( window - document - parent - this )
action 1 | action
action is the sort of animation we want to execute
ie. If we want to move an object to the left or right, we use the left position attribute
ie. If we want to change a background color, we use the backgroundColor attribute
the full list of actions is:
left, top, width, height
opacity
borderWidth
margin, marginLeft, marginRight, marginTop, marginBottom
fontSize
scrollTop, scrollLeft
the full list of color actions is:
color
backgroundColor
borderLeftColor, borderRightColor, borderTopColor, borderBottomColor
NOTE: action 2 to 5 | action are a repeat of action 1 | action
NOTE: action 6 | color action is specifically for use with the color tool
action 1 | value
action value is the value to which we want to animate our object, there are multiple possibilities
absolute value:
ie. animate left 100 or top 100
this would move the object to pixel position 100 on the screen
relative value:
ie. animate left +=100 or top -=100
this would move the object 100 pixels from it's current position
by adding a += or a -= before our number value, making it positive or negative
opacity value:
ie. animate opacity 1.0 or opacity .5 or opacity 0.25 or opacity 1
opacity is set from 0.0 to 1.0 where 1.0 represent full opacity
color value:
we can use hexadecimal (#FFFFFF) or hexadecimal short (#FFF) or color-name (white)
ie. backgroundColor: red or borderLeftColor: #FFF
NOTE: for a color-name reference see here
NOTE: % and px and em can also be used behind the value ie. animate fontSize 15em
NOTE: action 2 to 5 | value are a repeat of action 1 | value
NOTE: action 6 | color value is specifically for use with the color tool
•••• var: string
----- -----
duration
duration is the time for the animation to complete
NOTE: do not set to ZERO when using color animation (minimal value 1)
•••• var: non-string
easing
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
lock
if animation lock is enabled the animation will first complete it's cycle before any event can target this selector
NOTE: although animation lock occurs before any of the 2 selectors (animators), each animator still has it's own lock
•••• var: non-string
add action | before & add action | after
with add action actions can be added before or after the animation
by doing so we can further enhance our animation (or change actions)
some of the actions we can use are:
before: stop, stop(true), hide, show, css: (overflow,relative,float etc) attr: (align,style etc)
after: hide, show, css, attr etc
for some practical uses of these actions see here
•••• var: string | •••• var: non-string
add action | to
with add action to we can add animation to execute at the same time
the same actions as the property action 1 | action are used here
•••• var: string | •••• var: non-string
callback | after
add a new function after the animation completes
the callback function in full range is beyond the scope of this manual
for an in depth on callback see here
----- ----- NOTE: all above properties apply to both animators ANIMATOR 1 and ANIMATOR 2
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 | variable
add function variables ie. Call_Load_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
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
NOTE: the OnLoad module has 2 selectors (2 animators per entry ANIMATOR 1 and ANIMATOR 2)
NOTE: use of window or document or parent or this as selector will automatically disable tags on the selector (=non-string)
NOTE: setting this property to not used prevents code for this selector from being generated
•••• var: string | •••• var: non-string ( window - document - parent - this )
action 1 | action
action is the sort of animation we want to execute
ie. If we want to move an object to the left or right, we use the left position attribute
ie. If we want to change a background color, we use the backgroundColor attribute
the full list of actions is:
left, top, width, height
opacity
borderWidth
margin, marginLeft, marginRight, marginTop, marginBottom
fontSize
scrollTop, scrollLeft
the full list of color actions is:
color
backgroundColor
borderLeftColor, borderRightColor, borderTopColor, borderBottomColor
NOTE: action 2 to 5 | action are a repeat of action 1 | action
NOTE: action 6 | color action is specifically for use with the color tool
action 1 | value
action value is the value to which we want to animate our object, there are multiple possibilities
absolute value:
ie. animate left 100 or top 100
this would move the object to pixel position 100 on the screen
relative value:
ie. animate left +=100 or top -=100
this would move the object 100 pixels from it's current position
by adding a += or a -= before our number value, making it positive or negative
opacity value:
ie. animate opacity 1.0 or opacity .5 or opacity 0.25 or opacity 1
opacity is set from 0.0 to 1.0 where 1.0 represent full opacity
color value:
we can use hexadecimal (#FFFFFF) or hexadecimal short (#FFF) or color-name (white)
ie. backgroundColor: red or borderLeftColor: #FFF
NOTE: for a color-name reference see here
NOTE: % and px and em can also be used behind the value ie. animate fontSize 15em
NOTE: action 2 to 5 | value are a repeat of action 1 | value
NOTE: action 6 | color value is specifically for use with the color tool
•••• var: string
----- -----
duration
duration is the time for the animation to complete
NOTE: do not set to ZERO when using color animation (minimal value 1)
•••• var: non-string
easing
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
lock
if animation lock is enabled the animation will first complete it's cycle before any event can target this selector
NOTE: although animation lock occurs before any of the 2 selectors (animators), each animator still has it's own lock
•••• var: non-string
add action | before & add action | after
with add action actions can be added before or after the animation
by doing so we can further enhance our animation (or change actions)
some of the actions we can use are:
before: stop, stop(true), hide, show, css: (overflow,relative,float etc) attr: (align,style etc)
after: hide, show, css, attr etc
for some practical uses of these actions see here
•••• var: string | •••• var: non-string
add action | to
with add action to we can add animation to execute at the same time
the same actions as the property action 1 | action are used here
•••• var: string | •••• var: non-string
callback | after
add a new function after the animation completes
the callback function in full range is beyond the scope of this manual
for an in depth on callback see here
----- ----- NOTE: all above properties apply to both animators ANIMATOR 1 and ANIMATOR 2
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 | variable
add function variables ie. Call_Load_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
__________________________________________________________________________
more info on module | OnLoad see here Overview
more info on module | OnLoad see here Custom Fx
more info on module | OnLoad see here Overview
more info on module | OnLoad see here Custom Fx
STRUCTURE: function (e) {
selector - action before - animator - callback - action after
selector - action before - animator - callback - action after
- javascript after }
anim.lock
anim.lock
- javascript before - delay -
TOOL
MODULE ONLOAD - PROPERTIES
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
delay
delay is the time the animation will wait before it executes
Html animations do not not have a timeline on which to animate like ie. Flash has frames
instead animation can be timed by time delay, the time is measured in milliseconds
NOTE: although animations can be timed by delay we can also animate by using the run on call function (see below)
•••• var: non-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
delay
delay is the time the animation will wait before it executes
Html animations do not not have a timeline on which to animate like ie. Flash has frames
instead animation can be timed by time delay, the time is measured in milliseconds
NOTE: although animations can be timed by delay we can also animate by using the run on call function (see below)
•••• var: non-string
id
with the id property we can set the object to target for CSS3 transform animation by id
NOTE: this property switches to selector mode if the characters (# . +) are used
# = id
. = class
+ = variable
NOTE: use of this as input will automatically disable tags on the selector (=non-string)
NOTE: setting this property to not used prevents code for this property from being generated
•••• var: string | •••• var: non-string ( this )
rotate
set rotation
•••• var: string
scale X
set horizontal scale
•••• var: string
scale Y
set vertical scale
•••• var: string
skew X
set horizontal skew
•••• var: string
scale Y
set vertical skew
•••• var: string
translate X
set horizontal position
•••• var: string
translate Y
set vertical position
•••• var: string
additional css
add additional css for the animation
•••• var: string
duration
set animation duration
•••• var: non-string
easing
easing effect will add non-linear movement to animation, movement like acceleration, deceleration etc
the full list of easing effects is:
ease, ease-in, ease-out, ease-in-out
circ-in, circ-out, circ-in-out
cubic-in, cubic-out, cubic-in-out
elas-in, elas-out, elas-in-out
expo-in, expo-out, expo-in-out
quad-in, quad-out, quad-in-out
quart-in, quart-out, quart-in-out
quint-in, quint-out, quint-in-out
sine-in, sine-out, sine-in-out
linear
NOTE: for a reference on easing effect see here
•••• var: string
callback | after
add a new function after the animation completes
the callback function in full range is beyond the scope of this manual
for an in depth on callback see here
• fn: after: function (css) { }
css = returns true if callback occurred on CSS3 animation
this = this can be used inside the function to get/set internal options - ie. this.id
with the id property we can set the object to target for CSS3 transform animation by id
NOTE: this property switches to selector mode if the characters (# . +) are used
# = id
. = class
+ = variable
NOTE: use of this as input will automatically disable tags on the selector (=non-string)
NOTE: setting this property to not used prevents code for this property from being generated
•••• var: string | •••• var: non-string ( this )
rotate
set rotation
•••• var: string
scale X
set horizontal scale
•••• var: string
scale Y
set vertical scale
•••• var: string
skew X
set horizontal skew
•••• var: string
scale Y
set vertical skew
•••• var: string
translate X
set horizontal position
•••• var: string
translate Y
set vertical position
•••• var: string
additional css
add additional css for the animation
•••• var: string
duration
set animation duration
•••• var: non-string
easing
easing effect will add non-linear movement to animation, movement like acceleration, deceleration etc
the full list of easing effects is:
ease, ease-in, ease-out, ease-in-out
circ-in, circ-out, circ-in-out
cubic-in, cubic-out, cubic-in-out
elas-in, elas-out, elas-in-out
expo-in, expo-out, expo-in-out
quad-in, quad-out, quad-in-out
quart-in, quart-out, quart-in-out
quint-in, quint-out, quint-in-out
sine-in, sine-out, sine-in-out
linear
NOTE: for a reference on easing effect see here
•••• var: string
callback | after
add a new function after the animation completes
the callback function in full range is beyond the scope of this manual
for an in depth on callback see here
• fn: after: function (css) { }
css = returns true if callback occurred on CSS3 animation
this = this can be used inside the function to get/set internal options - ie. this.id
CSS3 - TRANSFORM
b5.6
JQUERY - ANIMATORS
CSS3 - KEYFRAME
keyframe | id
with the id property we can set the object to target for CSS3 keyframe animation by id
NOTE: this property switches to selector mode if the characters (# . +) are used
# = id
. = class
+ = variable
NOTE: use of this as input will automatically disable tags on the selector (=non-string)
NOTE: setting the property to not used prevents code for this property from being generated
•••• var: string | •••• var: non-string ( this )
keyframe | effect
set keyframe animation from the included animate.css library or a custom keyframe effect
•••• var: string
keyframe | iteration
set keyframe iteration, amount of times the effect will repeat
•••• var: string
keyframe | fill mode
set keyframe fill mode
none = no style before or after the effect is applied
forwards = at animation end it's end style is applied
both = at animation start and end it's start and end style is applied
•••• var: string
keyframe | play state
set keyframe initial play state, running or paused
NOTE:
the CSS3 keyframe section is a function, it therefore allows multiple methods of executing, manipulating, the animation
external method:
when the keyframe initial state is paused we can manual engage (resume) the animation with the following function
$.jor_trans({id:'ID or SELECTOR'}); - exmp: $.jor_trans({id:'Shape1'});
internal method:
another method could be to use variables (parameters) and (re)call the function
•••• var: string
keyframe | duration
set animation duration
•••• var: non-string
keyframe | easing
easing effect will add non-linear movement to animation, movement like acceleration, deceleration etc
the full list of easing effects is:
ease, ease-in, ease-out, ease-in-out
circ-in, circ-out, circ-in-out
cubic-in, cubic-out, cubic-in-out
elas-in, elas-out, elas-in-out
expo-in, expo-out, expo-in-out
quad-in, quad-out, quad-in-out
quart-in, quart-out, quart-in-out
quint-in, quint-out, quint-in-out
sine-in, sine-out, sine-in-out
linear
NOTE: for a reference on easing effect see here
•••• var: string
keyframe | reset before
enabling the reset before property will reset the animation before the animation occurs
this allows to reset the animation on each call, ie. if called in repeat by an event
NOTE: internal the animation is always reset after the animation IF the fill mode property is set to none
•••• var: non-string
keyframe | callback | after
add a new function after the animation completes
the callback function in full range is beyond the scope of this manual
for an in depth on callback see here
• fn: after: function (css) { }
css = returns true if callback occurred on CSS3 animation
this = this can be used inside the function to get/set internal options - ie. this.id
with the id property we can set the object to target for CSS3 keyframe animation by id
NOTE: this property switches to selector mode if the characters (# . +) are used
# = id
. = class
+ = variable
NOTE: use of this as input will automatically disable tags on the selector (=non-string)
NOTE: setting the property to not used prevents code for this property from being generated
•••• var: string | •••• var: non-string ( this )
keyframe | effect
set keyframe animation from the included animate.css library or a custom keyframe effect
•••• var: string
keyframe | iteration
set keyframe iteration, amount of times the effect will repeat
•••• var: string
keyframe | fill mode
set keyframe fill mode
none = no style before or after the effect is applied
forwards = at animation end it's end style is applied
both = at animation start and end it's start and end style is applied
•••• var: string
keyframe | play state
set keyframe initial play state, running or paused
NOTE:
the CSS3 keyframe section is a function, it therefore allows multiple methods of executing, manipulating, the animation
external method:
when the keyframe initial state is paused we can manual engage (resume) the animation with the following function
$.jor_trans({id:'ID or SELECTOR'}); - exmp: $.jor_trans({id:'Shape1'});
internal method:
another method could be to use variables (parameters) and (re)call the function
•••• var: string
keyframe | duration
set animation duration
•••• var: non-string
keyframe | easing
easing effect will add non-linear movement to animation, movement like acceleration, deceleration etc
the full list of easing effects is:
ease, ease-in, ease-out, ease-in-out
circ-in, circ-out, circ-in-out
cubic-in, cubic-out, cubic-in-out
elas-in, elas-out, elas-in-out
expo-in, expo-out, expo-in-out
quad-in, quad-out, quad-in-out
quart-in, quart-out, quart-in-out
quint-in, quint-out, quint-in-out
sine-in, sine-out, sine-in-out
linear
NOTE: for a reference on easing effect see here
•••• var: string
keyframe | reset before
enabling the reset before property will reset the animation before the animation occurs
this allows to reset the animation on each call, ie. if called in repeat by an event
NOTE: internal the animation is always reset after the animation IF the fill mode property is set to none
•••• var: non-string
keyframe | callback | after
add a new function after the animation completes
the callback function in full range is beyond the scope of this manual
for an in depth on callback see here
• fn: after: function (css) { }
css = returns true if callback occurred on CSS3 animation
this = this can be used inside the function to get/set internal options - ie. this.id
b5.6
b5.61
b5.61
b5.62