2 ANIMATORS
The OnLoad module has 2 selectors - 2 animators
Each entry has 2 animators that can be used in different structures
••• EXAMPLE 1
Animate PARENT and CHILD --- object is Image1
identifier : my animation notes
delay : 0
JQUERY - ANIMATOR 1
selector : #wb_Image1 <--- is parent element
action 1 | action : left
action 1 | value : +=300
action 2 | action : off
action 2 | value :
duration : 300
...
JQUERY - ANIMATOR 2
selector : #image1 <--- is child element
action 3 | action : width
action 3 | value : +=300
action 4 | action : off
action 4 | value :
...
duration : 300
...
run on load : true
run on call : Call_Load_1
This will animate an Image1 300 plus in left position, and at the same time animate it's width plus 300
Here the animation structure occurs at the same time, it is a 2 elements animation
••• EXAMPLE 2
Animate 1st and 2nd --- object is Layer 1
identifier : my animation notes
delay : 0
JQUERY - ANIMATOR 1
selector : #layer1 <--- is 1st animation (=element 1)
action 1 | action : left
action 1 | value : +=300
action 2 | action : off
action 2 | value :
duration : 300
...
JQUERY - ANIMATOR 2
selector : #layer1 <--- is 2nd animation (=element 1)
action 3 | action : width
action 3 | value : +=300
action 4 | action : off
action 4 | value :
...
duration : 300
...
run on load : true
run on call : Call_Load_1
This will animate a Layer1 300 plus in left position, and next in sequence animate it's width plus 300
Here the animation structure occurs - one at a time, in sequence, it is a 1 element animation
••• EXAMPLE 3
Animate 1st and 2nd --- object is Layer 1 and Layer 2
identifier : my animation notes
delay : 0
JQUERY - ANIMATOR 1
selector : #layer1 <--- is 1st animation (=element 1)
action 1 | action : left
action 1 | value : +=300
action 2 | action : off
action 2 | value :
duration : 300
...
JQUERY - ANIMATOR 2
selector : #layer2 <--- is 2nd animation (=element 2)
action 3 | action : width
action 3 | value : +=300
action 4 | action : off
action 4 | value :
...
duration : 300
...
run on load : true
run on call : Call_Load_1
This will animate a Layer1 300 plus in left position, and at the same time animate a Layer2 in width plus 300
Here the animation structure occurs at the same time, it is a 2 elements animation
see also chapter When do we animate what ? for more info here
The OnLoad module has 2 selectors - 2 animators
Each entry has 2 animators that can be used in different structures
••• EXAMPLE 1
Animate PARENT and CHILD --- object is Image1
identifier : my animation notes
delay : 0
JQUERY - ANIMATOR 1
selector : #wb_Image1 <--- is parent element
action 1 | action : left
action 1 | value : +=300
action 2 | action : off
action 2 | value :
duration : 300
...
JQUERY - ANIMATOR 2
selector : #image1 <--- is child element
action 3 | action : width
action 3 | value : +=300
action 4 | action : off
action 4 | value :
...
duration : 300
...
run on load : true
run on call : Call_Load_1
This will animate an Image1 300 plus in left position, and at the same time animate it's width plus 300
Here the animation structure occurs at the same time, it is a 2 elements animation
••• EXAMPLE 2
Animate 1st and 2nd --- object is Layer 1
identifier : my animation notes
delay : 0
JQUERY - ANIMATOR 1
selector : #layer1 <--- is 1st animation (=element 1)
action 1 | action : left
action 1 | value : +=300
action 2 | action : off
action 2 | value :
duration : 300
...
JQUERY - ANIMATOR 2
selector : #layer1 <--- is 2nd animation (=element 1)
action 3 | action : width
action 3 | value : +=300
action 4 | action : off
action 4 | value :
...
duration : 300
...
run on load : true
run on call : Call_Load_1
This will animate a Layer1 300 plus in left position, and next in sequence animate it's width plus 300
Here the animation structure occurs - one at a time, in sequence, it is a 1 element animation
••• EXAMPLE 3
Animate 1st and 2nd --- object is Layer 1 and Layer 2
identifier : my animation notes
delay : 0
JQUERY - ANIMATOR 1
selector : #layer1 <--- is 1st animation (=element 1)
action 1 | action : left
action 1 | value : +=300
action 2 | action : off
action 2 | value :
duration : 300
...
JQUERY - ANIMATOR 2
selector : #layer2 <--- is 2nd animation (=element 2)
action 3 | action : width
action 3 | value : +=300
action 4 | action : off
action 4 | value :
...
duration : 300
...
run on load : true
run on call : Call_Load_1
This will animate a Layer1 300 plus in left position, and at the same time animate a Layer2 in width plus 300
Here the animation structure occurs at the same time, it is a 2 elements animation
see also chapter When do we animate what ? for more info here
run on call : is the function name with which we can activate/call this function
selector : is the path to the object we want to animate
animation : is the action we want to occur
callback : is a new function we want to occur after the animation completes
Each entry starts with a run on call, so each entry can be called individual
selector : is the path to the object we want to animate
animation : is the action we want to occur
callback : is a new function we want to occur after the animation completes
Each entry starts with a run on call, so each entry can be called individual
••• STRAGEGY 1: RUN ON LOAD=true
In this setup the entries run once from top to bottom on page load, this is the easiest method to work with, not very complex
••• STRAGEGY 2: RUN ON LOAD=false and Sequence by Callback (method 1)
Here only the first entry is set to run on load, and it's callback is used to start a sequence of animations
Very complex low level animation can be created with this method
Very complex low level animation can be created with this method
••• STRAGEGY 3: RUN ON LOAD=false and Sequence by Callback (method 2)
Basically the same as strategy 2 , but all calls are done from the first entry
Only the first entry is set to run on load, and it's callback is used to start a sequence of animations
Very complex low level animation can be created with this method
Only the first entry is set to run on load, and it's callback is used to start a sequence of animations
Very complex low level animation can be created with this method
There are several methods of working with the OnLoad module
It can be used as an on page load animation, but can also be activated as a function by a callback or event
Also the actions to perform can differ, let's list some of the possible work strategies
It can be used as an on page load animation, but can also be activated as a function by a callback or event
Also the actions to perform can differ, let's list some of the possible work strategies
ARCHITECTURE
__________________________________________________________________________
more info on module | OnLoad see here Properties
more info on module | OnLoad see here Custom Fx
more info on module | OnLoad see here Properties
more info on module | OnLoad see here Custom Fx
Entry 1:
Entry 2:
Entry 3: repeat etc etc
STRATEGIES
Entry 1:
Entry 2:
Entry 3: repeat etc etc
Entry 1:
Entry 2:
Entry 3:
Entry 4: repeat etc etc
Entry 1:
Entry 2:
Entry 3:
Entry 4: repeat etc etc
SELECTOR CONVERT
The selector by default is a string value, but with module | OnLoad the selector can convert to a non-string value
When the name contains the word window document parent or this the tags around the value are automatically removed
Note that the name only has to contain the word ...
examples:
selector = this ---> $(this)
selector = thisVariable ---> $(thisVariable)
selector = #myID ---> $('#myID')
selector = '#myID',parent.document ---> $('#myID',parent.document)
The selector by default is a string value, but with module | OnLoad the selector can convert to a non-string value
When the name contains the word window document parent or this the tags around the value are automatically removed
Note that the name only has to contain the word ...
examples:
selector = this ---> $(this)
selector = thisVariable ---> $(thisVariable)
selector = #myID ---> $('#myID')
selector = '#myID',parent.document ---> $('#myID',parent.document)
MODULE ONLOAD - OVERVIEW
jQuery Animate
CSS3 Keyframe
CSS3 Transform
CSS3 Keyframe
CSS3 Transform
TOOL
These are the 3 basic way's of using the OnLoad module
Of course all 3 methods can and should be used mixed together to produce the result we want to achieve
Another strategy could be using one function and passing variables thru the function
Module OnLoad allows for many setups and strategies to achieve the result we are after
Of course all 3 methods can and should be used mixed together to produce the result we want to achieve
Another strategy could be using one function and passing variables thru the function
Module OnLoad allows for many setups and strategies to achieve the result we are after
STOP ACTION
Additional actions can be set before, after and to the animation
The stop( ) action in particular is of importance, see more info on the stop( ) action here
See also info on actions here
Additional actions can be set before, after and to the animation
The stop( ) action in particular is of importance, see more info on the stop( ) action here
See also info on actions here
LOCK
The property lock is just like the above stop( ) action another method for preventing an animation from executing
It prevents an animation from executing while the animation is already in motion
With the lock method the animation will always run it's complete cycle before it can be called again
The lock method exceeds the stop( ) method
NOTE: each of the 2 animators has it's own lock, although only one lock per function entry is required !
The property lock is just like the above stop( ) action another method for preventing an animation from executing
It prevents an animation from executing while the animation is already in motion
With the lock method the animation will always run it's complete cycle before it can be called again
The lock method exceeds the stop( ) method
NOTE: each of the 2 animators has it's own lock, although only one lock per function entry is required !
JQUERY - ANIMATORS
The 1st animation method, new added in JMPv3.0 b5.6 is the CSS3 keyframe method
In this mode we simply targets an object by id (or selector) and select an effect from the included animate.css library
The keyframe setup also allows custom fx to be created and used
The custom fx option is an advanced property, read more about this new option - here
More info on the CSS3 keyframe method see properties
In this mode we simply targets an object by id (or selector) and select an effect from the included animate.css library
The keyframe setup also allows custom fx to be created and used
The custom fx option is an advanced property, read more about this new option - here
More info on the CSS3 keyframe method see properties
CSS3 - KEYFRAME
EXPLAIN ?
module | OnLoad properties can be used to create animation on objects by selector - (id)
This module is best used in combination with module | OnEvent
From JMPv3.0 b5.6 on the module | OnLoad can be set up in 3 methods
module | OnLoad properties can be used to create animation on objects by selector - (id)
This module is best used in combination with module | OnEvent
From JMPv3.0 b5.6 on the module | OnLoad can be set up in 3 methods
b5.6
The 2nd animation method, also new added in JMPv3.0 b5.6 is the CSS3 transform method
This mode allows to create CSS3 transform effects on an object by selection of id (or selector)
NOTE:
The previous jquery.2dtransform.js method has been removed and replaced by this section
• objects are no longer wrapped by module | OnLoad and the wrap option has been removed
• IMPORTANT: previous added transform animation will not function any more, use this new CSS3 transform section instead
More info on the CSS3 transform method see properties
This mode allows to create CSS3 transform effects on an object by selection of id (or selector)
NOTE:
The previous jquery.2dtransform.js method has been removed and replaced by this section
• objects are no longer wrapped by module | OnLoad and the wrap option has been removed
• IMPORTANT: previous added transform animation will not function any more, use this new CSS3 transform section instead
More info on the CSS3 transform method see properties
CSS3 - TRANSFORM
b5.6
The 3th animation method is animation by use of 2 jQuery animators, this method only allows to target objects by selector
RECOMMENDED:
Module | OnLoad now consist of 2 methods of animation JQUERY and CSS3 ANIMATION in a single module
I recommend not to use both methods on the same object at the same time
In default CSS3 transform and jQuery will not run in sync, although it is possible to sync both methods
I recommend not to use or caution using both methods on the same object at the same time
Module | OnLoad now consist of 2 methods of animation JQUERY and CSS3 ANIMATION in a single module
I recommend not to use both methods on the same object at the same time
In default CSS3 transform and jQuery will not run in sync, although it is possible to sync both methods
I recommend not to use or caution using both methods on the same object at the same time
NEW IN BUILD 5.6
01. REMOVED
• removed - jquery.2dtransform.js - replaced by CSS3 transform section
• removed - option wrap for jquery.2dtransform.js
02. NEW
• new - CSS3 keyframe section
03. NEW
• new - CSS3 transform section
01. REMOVED
• removed - jquery.2dtransform.js - replaced by CSS3 transform section
• removed - option wrap for jquery.2dtransform.js
02. NEW
• new - CSS3 keyframe section
03. NEW
• new - CSS3 transform section
5