jorextensions.com free extensions for WYSIWYG Webbuilder
jordan (6j6)
jordan (6j6)
tutorial for module | onscroll
jor_aniMateMASTERPACKv3.0 build 5
jordan (6j6) - jorextensions.com
jor_aniMateMASTERPACKv3.0 build 5
jordan (6j6) - jorextensions.com
TUTORIAL module | onscroll - basic mode enter
Welcome to this tutorial for jor_aniMateMASTERPACKv3.0 ...
In this tutorial we will use module | onscroll to create a basic mode ENTER onscroll animation
Module | onscroll can be found under the section 04. MODULES SECONDARY 2 in the extension
Module | onscroll can be found under the section 04. MODULES SECONDARY 2 in the extension
THE SELECTOR ?
.
To work with jor_aniMateMASTERPACKv3.0 it is crucial to understand the selector input
"The better understanding of the selector the more we can get out of jor_aniMateMASTERPACKv3.0"!
To gain an understanding of the selector input see the jor_aniMateMASTERPACKv3.0 online manual first
see here ...
• Selectors Simplified
• When do we animate what ?
.
To work with jor_aniMateMASTERPACKv3.0 it is crucial to understand the selector input
"The better understanding of the selector the more we can get out of jor_aniMateMASTERPACKv3.0"!
To gain an understanding of the selector input see the jor_aniMateMASTERPACKv3.0 online manual first
see here ...
• Selectors Simplified
• When do we animate what ?
In this tutorial we are going to create a basic mode ENTER onscroll animation
Hi-Ya, let's go over each of these effects one by one ... Yeah right-O, Yikes !:/
Luckily with module | onscroll mode ENTER we don't have to
Cause all these effects are based around the same principle
In ENTER mode module | onscroll functions as a target execute
Whenever an object enters the window viewport (with or without an offset/delay) the animation executes
We only need to know 3 principle setups to create all these effects
The 3 setups are ...
01. animate in - 02. animate out - 03. animate static
Let's go over each of these 3 setups one by one, Aah - much better !:)
Let's go ...
onscroll | mode = ENTER
What is jor_aniMateMASTERPACKv3.0 ?
jor_aniMateMASTERPACKv3.0 is a collection of 15+ modules and 8+ tools combined in one extension
They can work together as a pack to create a complete new extension or modules can be used freestanding
jor_aniMateMASTERPACKv3.0 is a tool first and foremost - combined with creativity the possibilities are endless
jor_aniMateMASTERPACKv3.0 is a collection of 15+ modules and 8+ tools combined in one extension
They can work together as a pack to create a complete new extension or modules can be used freestanding
jor_aniMateMASTERPACKv3.0 is a tool first and foremost - combined with creativity the possibilities are endless
Download the demo's of the above tutorials here as WB project ...
module | onscroll is a tool of jor_aniMateMASTERPACKv3.0 build 5 • 2009 - 2015
more demo's, info, online manual, etc for jor_aniMateMASTERPACKv3.0 visit jorextensions.com
jor_aniMateMASTERPACKv3.0 free extension for WYSIWYG Webbuilder
extension and code: jordan (6j6)
more demo's, info, online manual, etc for jor_aniMateMASTERPACKv3.0 visit jorextensions.com
jor_aniMateMASTERPACKv3.0 free extension for WYSIWYG Webbuilder
extension and code: jordan (6j6)
Hope you found this tutorial informative and useful ...
Module | onscroll can be used in many other setups
This demo should be a good start point to experiment with
Module | onscroll can be used in many other setups
This demo should be a good start point to experiment with
Online Manual
Online Manual - onscroll
Online Manual - Selectors Simplified..
Online Manual - When do we animate what ?
Online Manual - onscroll
Online Manual - Selectors Simplified..
Online Manual - When do we animate what ?
WYSIWYG Webbuilder Forum Topic JMPv3.0
More tutorials for JMPv3.0 see Online Tutorials
More free WB extensions visit jorextensions.com
Back To Top
More tutorials for JMPv3.0 see Online Tutorials
More free WB extensions visit jorextensions.com
Back To Top
That's the full basic onscroll ENTER mode animate IN tutorial completed
Level: Easy
module | onscroll - basic - tutorial
A basic mode ENTER scroll animation
Foreword
TUTORIAL
jor_aniMateMASTERPACKv3.0 b5
module | onscroll
jor_aniMateMASTERPACKv3.0 b5
module | onscroll
SEE LIVE EXTENDED DEMO
SEE LIVE DEMO 1
DOWNLOAD DEMOS
onscroll mode
Comments, feedback etc regarding this tutorial please post them at the WB Forum Topic JMPv3.0 ...
jordan (6j6)
jordan (6j6)
selector = #wb_animImage
And that's all the settings we have to make for our animate IN effect
From JMPv3.0 b5.4 on module | onscroll works in 2 modes, so we first need to set the correct mode
We set the onscroll | mode property to ENTER
We set the onscroll | mode property to ENTER
selector
Now we are ready to animate our object into the window viewport
In this Tutorial 1 we are going to animate a WB Image IN
As always with JMPv3.0 it's about the selector
We name the WB Image animImage the full selector becomes #wb_animImage
enter mode
Next we can set the actual effect that we want to use on our WB Image object
The enter | mode property can be set in 3 modes
01. jQuery fade
02. WB CSS3 animation
03. Animate.css CSS3 animation (keyframe)
In this Tutorial 1 we will use the 3th mode animate.css CSS3 animation (keyframe)
**NEW! - in JMPv3.0 b5.6 the animate.css library has been removed
But, it is still available as it is converted and modified into a new method - jquery.keyframes.mod
This new method allows for new powerful additions to CSS3 animation with JMPv3.0 - more info see here
This new method requires 2 adjustments to be made to be compatible with previous saved projects
• Reselect the effect, - the effect names have been changed
• A duration can now be set for the effect, - to match previous saved projects set the duration property to 1000
IMPORTANT: animate.css library removed ?
We want to use an animate in effect, for this Tutorial 1 we will use the keyframe-bounceInLeft effect
Tutorial 1
Animate IN
enter | mode = keyframe-bounceInLeft
enter offset
With the enter | offset property we can set an activation offset in percentage
If we set it to 0 the animation will activate when the object enters the window viewport
If we set it to ie. 50 the animation will activate 50% into the window viewport
And that is what we will use in this tutorial 50
If we set it to 0 the animation will activate when the object enters the window viewport
If we set it to ie. 50 the animation will activate 50% into the window viewport
And that is what we will use in this tutorial 50
enter | offset = 50
enter visibility
Next up is they most important property we need to set to get a correct animation
If we want a correct IN animation we need to set the enter | visibility property to hidden
We only want the object to be visible when the object actually animates IN
Not while the object enters the window viewport
So .. principle is: ANIMATE IN - VISIBILITY = hidden
If we want a correct IN animation we need to set the enter | visibility property to hidden
We only want the object to be visible when the object actually animates IN
Not while the object enters the window viewport
So .. principle is: ANIMATE IN - VISIBILITY = hidden
enter | visibility = hidden
Tutorial 2
Animate OUT
Next we will go over an animate OUT effect, the settings are very similar to the animate IN effect
There are however some major differences at the same time, let's go over it
First we set the onscroll | mode to ENTER
There are however some major differences at the same time, let's go over it
First we set the onscroll | mode to ENTER
onscroll | mode = ENTER
In this Tutorial 2 we are going to animate a WB Layer OUT
We name the WB Layer animLayer the full selector becomes #animLayer
We name the WB Layer animLayer the full selector becomes #animLayer
selector = #animLayer
enter mode
Next we set the effect that we want to use on our WB Layer object
Just as in Tutorial 1 we will use the animate.css CSS3 animation library
Now we want to use an animate out effect, we will use the keyframe-zoomOutLeft effect
enter | mode = keyframe-zoomOutLeft
enter offset
CAUTION:
Using an animate OUT effect in it self is an unusual action for a web design
We want information to be on the page not moving off the page
Although an animate OUT has it uses, I recommend, caution in using an animate OUT effect
It can easily lead to confusing web design ... !
With that in mind we can use the enter | offset property quite useful
We could ie. set a high offset for an object, which activates the animation at a late stage
The enter | offset allows a percentage offset between 0 to 150
Which is abnormal in itself of course, the object could theoretically activate outside the window viewport ?
But it is an option we can play with
In this Tutorial 2 we will use an enter | offset of 90
Using an animate OUT effect in it self is an unusual action for a web design
We want information to be on the page not moving off the page
Although an animate OUT has it uses, I recommend, caution in using an animate OUT effect
It can easily lead to confusing web design ... !
With that in mind we can use the enter | offset property quite useful
We could ie. set a high offset for an object, which activates the animation at a late stage
The enter | offset allows a percentage offset between 0 to 150
Which is abnormal in itself of course, the object could theoretically activate outside the window viewport ?
But it is an option we can play with
In this Tutorial 2 we will use an enter | offset of 90
enter | offset = 90
enter visibility
Next up again is they most important property we need to set to get a correct animation
If we want a correct OUT animation we need to set the enter | visibility property to visible
Cause now we want the object to be visible when it enters the viewport
So ... principle is: ANIMATE OUT - VISIBILITY = visible
If we want a correct OUT animation we need to set the enter | visibility property to visible
Cause now we want the object to be visible when it enters the viewport
So ... principle is: ANIMATE OUT - VISIBILITY = visible
enter | visibility = visible
That's the full basic onscroll ENTER mode animate OUT tutorial completed
SEE LIVE DEMO 2
And that's all the settings we have to make for our animate OUT effect
Tutorial 3
Animate STATIC
Animate static, what is an animate STATIC ?
It is basically an animation that does not specifically animate IN or OUT
ie. a rubberBand effect or a wobble effect
It is an effect that is used as an attention seeker
The animation can start of visible or hidden , but remains visible after the effect, - static
Let's go over this animate STATIC effect, the same settings as before are basically used
First we set the onscroll | mode to ENTER
It is basically an animation that does not specifically animate IN or OUT
ie. a rubberBand effect or a wobble effect
It is an effect that is used as an attention seeker
The animation can start of visible or hidden , but remains visible after the effect, - static
Let's go over this animate STATIC effect, the same settings as before are basically used
First we set the onscroll | mode to ENTER
In this Tutorial 3 we are going to animate a WB Text STATIC
We name the WB Text animText the full selector becomes #wb_animText
We name the WB Text animText the full selector becomes #wb_animText
selector = #wb_animText
enter mode
Next we set the effect that we want to use on our WB Text object
Just as the previous tutorials we will use the animate.css CSS3 animation library
Here we want to use an animate static effect, we will use the keyframe-rubberBand effect
enter offset
In this Tutorial 3 we will use the same offset as Tutorial 1 50 percent
enter | offset = 50
enter visibility
Next up again is they most important property we need to set to get a correct animation
The visibility state before the animation can be both either visible or hidden
The property enter | visibility however can not be set as such ... !
If we want the object to be hidden before the animation executes
we can set the enter | visibility property to hidden
However, if we want the object to be visible before the animation executes
we must set the enter | visibility property to visible static
So ... principle is: ANIMATE STATIC - VISIBILITY = hidden or visible static
In this Tutorial 3 we opt for visible, so we use visible static
The visibility state before the animation can be both either visible or hidden
The property enter | visibility however can not be set as such ... !
If we want the object to be hidden before the animation executes
we can set the enter | visibility property to hidden
However, if we want the object to be visible before the animation executes
we must set the enter | visibility property to visible static
So ... principle is: ANIMATE STATIC - VISIBILITY = hidden or visible static
In this Tutorial 3 we opt for visible, so we use visible static
enter | visibility = visible static
And that's all the settings we have to make for our animate STATIC effect
onscroll | mode = ENTER
enter | mode = keyframe-rubberBand
That's the full basic onscroll ENTER mode animate STATIC tutorial completed
SEE LIVE DEMO 3
ADDITIONAL NOTE!
Note that all the tutorials above are using the animate.css CSS3 animation library
When using WB CSS3 animation another property becomes important
That property is the enter | brake property
This tutorial will not go into that property, read more about this property and other useful information here
*** future tutorial to follow
When using WB CSS3 animation another property becomes important
That property is the enter | brake property
This tutorial will not go into that property, read more about this property and other useful information here
*** future tutorial to follow
