2 Animators
For this reason module | OnLoad has 2 animators - ANIMATOR 1 and ANIMATOR 2
We can use both animators to animate one single object if needed
In the example of the above Image we could ...
Use ANIMATOR 1 to target the wrapper #wb_Image1 (=the parent)
And ANIMATOR 2 to target the wrapped #Image1 (=the child)
With ANIMATOR 1 we can then animate the objects position
With ANIMATOR 2 we can then animate the objects dimension
see here
For this reason module | OnLoad has 2 animators - ANIMATOR 1 and ANIMATOR 2
We can use both animators to animate one single object if needed
In the example of the above Image we could ...
Use ANIMATOR 1 to target the wrapper #wb_Image1 (=the parent)
And ANIMATOR 2 to target the wrapped #Image1 (=the child)
With ANIMATOR 1 we can then animate the objects position
With ANIMATOR 2 we can then animate the objects dimension
see here
01. A LAYER
The structure of a Layer in itself is a 1 element object
If we want to animate it in position we target the Layer's ID
If we want to animate it in dimension we target the Layer's ID
If we want to drag (draggable) this object we target the Layer's ID
animate position/dimension --> selector = #Layer1
If we want to animate it in position we target the Layer's ID
If we want to animate it in dimension we target the Layer's ID
If we want to drag (draggable) this object we target the Layer's ID
animate position/dimension --> selector = #Layer1
IN DEPTH - WHEN DO WE ANIMATE WHAT ?
Layer1
wb_Image1
Image1
The structure of an Image is a 2 element object
If we want to animate it in position we target the Image holder ID
If we want to animate it in dimension we target the Image ID
If we want to drag image1 we target the Image holder ID
animate position --> selector = #wb_Image1
animate dimension --> selector = #Image1
If we want to animate it in position we target the Image holder ID
If we want to animate it in dimension we target the Image ID
If we want to drag image1 we target the Image holder ID
animate position --> selector = #wb_Image1
animate dimension --> selector = #Image1
Selectors are probably they most important thing to understand to get anything out of jor_aniMate
jor_aniMateMASTERPACKv3.0 in large part is jQuery based, jQuery in large part is, target an object, manipulate the target
target an object - manipulate the target
That's how the section Selectors Simplified starts here
But that also implies that we need to know how Webbuilder objects are structured
Cause we need to target the correct object, the correct target, to make jor_aniMate work correctly
SO WHEN DO WE ANIMATE WHAT ?
The simple truth is ... there is no simple answer or solution to that question
What make one animation work correct can create a problem for another
But ... we can still break it down into simple structures and follow some simple rules and overcome most problems
Simple Rules:
01. some Webbuilder objects are wrapped and some objects are not
02. some animation must be applied to the wrapper and some animation need to be applied to the wrapped object
If we now take 2 objects in Webbuilder that each sit on each side of that range, we would find a Layer and an Image
Simple Structures:
01. a Layer IS NOT wrapped, It is positioned in absolute position on the page, there is NO parent #wb_Layer
02. an Image IS wrapped, it is placed inside a holder that is positioned in absolute position on the page, there IS a parent #wb_Image
jor_aniMateMASTERPACKv3.0 in large part is jQuery based, jQuery in large part is, target an object, manipulate the target
target an object - manipulate the target
That's how the section Selectors Simplified starts here
But that also implies that we need to know how Webbuilder objects are structured
Cause we need to target the correct object, the correct target, to make jor_aniMate work correctly
SO WHEN DO WE ANIMATE WHAT ?
The simple truth is ... there is no simple answer or solution to that question
What make one animation work correct can create a problem for another
But ... we can still break it down into simple structures and follow some simple rules and overcome most problems
Simple Rules:
01. some Webbuilder objects are wrapped and some objects are not
02. some animation must be applied to the wrapper and some animation need to be applied to the wrapped object
If we now take 2 objects in Webbuilder that each sit on each side of that range, we would find a Layer and an Image
Simple Structures:
01. a Layer IS NOT wrapped, It is positioned in absolute position on the page, there is NO parent #wb_Layer
02. an Image IS wrapped, it is placed inside a holder that is positioned in absolute position on the page, there IS a parent #wb_Image
Quick List
Is the object wrapped or not, does it have a div holder with a prefix-id #wb_ ?
A Quick list to most of Webbuilders objects/components and there basic structure
see here
Reference Chart
A more comprehensive Reference Chart to most of Webbuilder objects/components in relation to there possible animation
see here
See also Selectors Simplified here
Is the object wrapped or not, does it have a div holder with a prefix-id #wb_ ?
A Quick list to most of Webbuilders objects/components and there basic structure
see here
Reference Chart
A more comprehensive Reference Chart to most of Webbuilder objects/components in relation to there possible animation
see here
See also Selectors Simplified here
A Layer IS NOT wrapped, It is positioned in absolute position on the page, there is NO parent #wb_Layer
If we would now target the Layer's ID most of jor_aniMate's animation would work correct
Always Interpret the structure of the object, then target with the correct selector
If we would now target the Layer's ID most of jor_aniMate's animation would work correct
Always Interpret the structure of the object, then target with the correct selector
02. AN IMAGE
Always Interpret the structure of the object, then target with the correct selector
INTERPRET THE STRUCTURE
To make an animation work is to interpret the structure of an object and then target with the correct selector
jor_aniMateMASTERPACKv3.0 is a tool first and foremost, it is not written to provide the most obvious or easiest of solutions
The opposite, It is written to provide as much possible access to our script, to create the code, project intended
Using jor_aniMateMASTERPACKv3.0 might therefore not always be straightforward in use
But with creative thinking we can overcome most obstacles and produce some powerful cross-browser web design tools
jor_aniMateMASTERPACKv3.0 is a tool first and foremost, it is not written to provide the most obvious or easiest of solutions
The opposite, It is written to provide as much possible access to our script, to create the code, project intended
Using jor_aniMateMASTERPACKv3.0 might therefore not always be straightforward in use
But with creative thinking we can overcome most obstacles and produce some powerful cross-browser web design tools
SOME ASSISTANCE
An Image IS wrapped, it is placed inside a holder that is positioned in absolute position on the page, there IS a parent #wb_Image
The Image object in structure is a 2 element object, if we want to animate it we need to animate the correct element
If we want to animate it in position we need to target the Image holder, it's wrapper, our selector would be #wb_Image1
If we want to animate it in dimension we need to target the Image itself, our selector would then be #Image1
The Image object in structure is a 2 element object, if we want to animate it we need to animate the correct element
If we want to animate it in position we need to target the Image holder, it's wrapper, our selector would be #wb_Image1
If we want to animate it in dimension we need to target the Image itself, our selector would then be #Image1