EXPLAIN ?
module | onscroll ENTER mode properties can be used to create animated control over WB objects by the top scrollbar
Objects that enter into the window viewport are animated into position
Multiple animation modes can be used
01. jQuery fade in
02. animate.css CSS3 animation
03. WB CSS3 animation
module | onscroll ENTER mode properties can be used to create animated control over WB objects by the top scrollbar
Objects that enter into the window viewport are animated into position
Multiple animation modes can be used
01. jQuery fade in
02. animate.css CSS3 animation
03. WB CSS3 animation
__________________________________________________________________________
more info on module | onscroll see here Properties
more info on module | onscroll see here Global Disable
more info on module | onscroll see here Custom Fx
more info on module | onscroll see here Overview Animator
more info on module | onscroll see here Online Tutorials
more info on module | onscroll see here Properties
more info on module | onscroll see here Global Disable
more info on module | onscroll see here Custom Fx
more info on module | onscroll see here Overview Animator
more info on module | onscroll see here Online Tutorials
MODULE ONSCROLL MODE ENTER - OVERVIEW
PLUGIN
Top ScrollBar Animation
jQuery Fadein
CSS3 Animation
Window Viewport Enter
jQuery Fadein
CSS3 Animation
Window Viewport Enter
From JMPv3.0 b5.4 on module | onscroll now consists of 2 modes
01. ANIMATOR and the new 02. ENTER mode
This section will explain the ENTER mode - information on the ANIMATOR mode can be found here
01. ANIMATOR and the new 02. ENTER mode
This section will explain the ENTER mode - information on the ANIMATOR mode can be found here
ONSCROLL MODE ENTER
ENTER MODE
Setting up module | onscroll ENTER mode is very easy
Each object that we target simply animates into position, we can even target multiple objects
ie. simply target all images with img or use ie. a class
An example ...
Setting up module | onscroll ENTER mode is very easy
Each object that we target simply animates into position, we can even target multiple objects
ie. simply target all images with img or use ie. a class
An example ...
••• EXAMPLE 1
Module | onscroll mode ENTER - fade in all images - jQuery
identifier : my onscroll notes
selector : img
onscroll | mode : ENTER
...
enter | mode : jquery fade
enter | once : false
...
enter | duration : 800
...
run on load : true
run on call : Call_OnScroll_1
...
This will fade in all image objects into the window viewport
We probably do not want to use module | onscroll in this scope, most likely we want the target to be more specific
But it is an option ...
Module | onscroll mode ENTER - fade in all images - jQuery
identifier : my onscroll notes
selector : img
onscroll | mode : ENTER
...
enter | mode : jquery fade
enter | once : false
...
enter | duration : 800
...
run on load : true
run on call : Call_OnScroll_1
...
This will fade in all image objects into the window viewport
We probably do not want to use module | onscroll in this scope, most likely we want the target to be more specific
But it is an option ...
••• EXAMPLE 2
Module | onscroll mode ENTER - rubberBand on a Layer1 - animate.css CSS3 animation
identifier : my onscroll notes
selector : #Layer1
onscroll | mode : ENTER
...
enter | mode : keyframe-rubberBand
enter | once : false
...
run on load : true
run on call : Call_OnScroll_1
...
In this example 2 we use the keyframe-rubberBand effect which is taken from the JMPv3.0 integrated animate.css library
Module | onscroll mode ENTER - rubberBand on a Layer1 - animate.css CSS3 animation
identifier : my onscroll notes
selector : #Layer1
onscroll | mode : ENTER
...
enter | mode : keyframe-rubberBand
enter | once : false
...
run on load : true
run on call : Call_OnScroll_1
...
In this example 2 we use the keyframe-rubberBand effect which is taken from the JMPv3.0 integrated animate.css library
In this example 1 we used jQuery fade animation to animate the objects
We can also use CSS3 animation, two CSS3 animation modes can be used
01. WB CSS3 animation and 02. animate.css CSS3 animation
An example of - 02. animate.css CSS3 animation ...
We can also use CSS3 animation, two CSS3 animation modes can be used
01. WB CSS3 animation and 02. animate.css CSS3 animation
An example of - 02. animate.css CSS3 animation ...
We can also use WB CSS3 animation that we have setup in the WB Style Manager - (see the WB Help on how to)
But ... we also have to enable the CSS3 animation in our WB project
We can do that by using ie. a dummy WB Shape object in which we enable the CSS3 animation by use of events
Use the Set Style option
Once we have the CSS3 animation active for use in our project we can use it in module | onscroll
But ... we also have to enable the CSS3 animation in our WB project
We can do that by using ie. a dummy WB Shape object in which we enable the CSS3 animation by use of events
Use the Set Style option
Once we have the CSS3 animation active for use in our project we can use it in module | onscroll
••• EXAMPLE 3
Module | onscroll mode ENTER - MyOwn3DFlip on a Layer1 - WB CSS3 animation
identifier : my onscroll notes
selector : #Layer1
onscroll | mode : ENTER
...
enter | mode : MyOwn3DFlip
enter | once : false
...
run on load : true
run on call : Call_OnScroll_1
...
Webbuilder uses many of the same CSS3 animations found in the animate.css library
The gained advantage here of course is we have complete control over the CSS3 animation setup
NOTE: from JMPv3.0 b5.6 on the duration and delay set in a WB CSS3 animation is surpassed
• duration is now set with the enter | duration property
• delay is now always set at ZERO - as the option enter | offset dictates the moment (delay) to activate
Module | onscroll mode ENTER - MyOwn3DFlip on a Layer1 - WB CSS3 animation
identifier : my onscroll notes
selector : #Layer1
onscroll | mode : ENTER
...
enter | mode : MyOwn3DFlip
enter | once : false
...
run on load : true
run on call : Call_OnScroll_1
...
Webbuilder uses many of the same CSS3 animations found in the animate.css library
The gained advantage here of course is we have complete control over the CSS3 animation setup
NOTE: from JMPv3.0 b5.6 on the duration and delay set in a WB CSS3 animation is surpassed
• duration is now set with the enter | duration property
• delay is now always set at ZERO - as the option enter | offset dictates the moment (delay) to activate
CALLBACKS
With the enter | callback | after property we can create a new function after the animation executes
We can get the object by using object inside the callback
example:
object.css('backgroundcolor','blue');
We can also get and set options by $(this)[0] inside the callback
With the enter | callback | after property we can create a new function after the animation executes
We can get the object by using object inside the callback
example:
object.css('backgroundcolor','blue');
We can also get and set options by $(this)[0] inside the callback
advanced!
GLOBAL DISABLE IGNORE
Module | onscroll functions can global be disabled for a Template from JMP3.0 b5.4 on
Read more about this useful new easy tools function here
Module | onscroll functions can global be disabled for a Template from JMP3.0 b5.4 on
Read more about this useful new easy tools function here
ENTER OFFSET
With the property enter | offset we can set an offset to the moment on which an animation activates inside the window viewport
The value is set in percentage ...
ie.
0 = the animation activates on window viewport enter
50 = the animation activates on 50% of the window viewport
The property functions the same in both directions, entering the window viewport from the bottom or top
NOTE: the range can be set between 0 and 150
With the property enter | offset we can set an offset to the moment on which an animation activates inside the window viewport
The value is set in percentage ...
ie.
0 = the animation activates on window viewport enter
50 = the animation activates on 50% of the window viewport
The property functions the same in both directions, entering the window viewport from the bottom or top
NOTE: the range can be set between 0 and 150
CSS3 EFFECT ANIMATE IN
When we use a CSS3 animate IN effect, the object animates into the window viewport
Then we want to set the property enter | visibility to hidden
An example ...
••• EXAMPLE: CSS3 animate IN
identifier : my onscroll notes
selector : #Layer1
onscroll | mode : ENTER
...
enter | mode : keyframe-fadeInLeftBig
...
enter | offset : 40
enter | visibility : hidden
...
run on load : true
run on call : Call_OnScroll_1
...
Here the object animates IN 40% into the window viewport
We do not want the object to be visible entering the window viewport, so the property enter | visibility is set to hidden
When we use a CSS3 animate IN effect, the object animates into the window viewport
Then we want to set the property enter | visibility to hidden
An example ...
••• EXAMPLE: CSS3 animate IN
identifier : my onscroll notes
selector : #Layer1
onscroll | mode : ENTER
...
enter | mode : keyframe-fadeInLeftBig
...
enter | offset : 40
enter | visibility : hidden
...
run on load : true
run on call : Call_OnScroll_1
...
Here the object animates IN 40% into the window viewport
We do not want the object to be visible entering the window viewport, so the property enter | visibility is set to hidden
ENTER VISIBILITY
The enter | visibility is an important property
It is used in combination with the enter | mode and the enter | offset property
The enter | visibility is an important property
It is used in combination with the enter | mode and the enter | offset property
CSS3 EFFECT ANIMATE OUT
When we use a CSS3 animate OUT effect, the object animates out of the window viewport
Then we want to set the property enter | visibility to visible
An example ...
••• EXAMPLE: CSS3 animate OUT
identifier : my onscroll notes
selector : #Layer1
onscroll | mode : ENTER
...
enter | mode : keyframe-fadeOutLeftBig
...
enter | offset : 40
enter | visibility : visible
...
run on load : true
run on call : Call_OnScroll_1
...
Here the object animates OUT 40% into the window viewport
Here we want the object to be visible when it enters the window viewport, so it can properly animate out the window viewport
The property enter | visibility here is set to visible
When we use a CSS3 animate OUT effect, the object animates out of the window viewport
Then we want to set the property enter | visibility to visible
An example ...
••• EXAMPLE: CSS3 animate OUT
identifier : my onscroll notes
selector : #Layer1
onscroll | mode : ENTER
...
enter | mode : keyframe-fadeOutLeftBig
...
enter | offset : 40
enter | visibility : visible
...
run on load : true
run on call : Call_OnScroll_1
...
Here the object animates OUT 40% into the window viewport
Here we want the object to be visible when it enters the window viewport, so it can properly animate out the window viewport
The property enter | visibility here is set to visible
CSS3 EFFECT ANIMATE STATIC
A third option is a CSS3 animate STATIC effect, the object does not specifically animate IN or OUT
The effect is an attention seeker , it can be hidden or visible on window viewport enter, but remains visible after the effect
The property enter | visibility must then have the value hidden or visible static
An example ...
••• EXAMPLE: CSS3 animate OUT
identifier : my onscroll notes
selector : #Layer1
onscroll | mode : ENTER
...
enter | mode : keyframe-rubberBand
...
enter | offset : 50
enter | visibility : visible static
...
run on load : true
run on call : Call_OnScroll_1
...
Here the object activates a static rubberBand effect 50% into the window viewport
Here we choose the object to be visible when it enters the window viewport
The property enter | visibility here is set to visible static
A third option is a CSS3 animate STATIC effect, the object does not specifically animate IN or OUT
The effect is an attention seeker , it can be hidden or visible on window viewport enter, but remains visible after the effect
The property enter | visibility must then have the value hidden or visible static
An example ...
••• EXAMPLE: CSS3 animate OUT
identifier : my onscroll notes
selector : #Layer1
onscroll | mode : ENTER
...
enter | mode : keyframe-rubberBand
...
enter | offset : 50
enter | visibility : visible static
...
run on load : true
run on call : Call_OnScroll_1
...
Here the object activates a static rubberBand effect 50% into the window viewport
Here we choose the object to be visible when it enters the window viewport
The property enter | visibility here is set to visible static
REMARKS AND NOTES:
• CSS3 animation be aware!
although CSS3 animation is a powerful enhancement to web design
it does not come without it's quirks
as always, any web design should be tested against different browsers
also be aware of the quirks when using CSS3 animation
ie.
- not all effects execute the same in all browsers (if at all)
- mouseover might disturb the execution of an effect while the effect occurs in some browsers
- an overflow on horizontal axis may activate on some effects
which can brake the page scroll completely in some browsers
the object is of course absolute positioned
Tip: set overflow-x to hidden - if design allows
- touch devices have there own quirks with CSS3 animation
especially when activated by the top scroll bar, they (most likely) should be turned off
see info here
• mode ENTER target execute be aware!
also be aware of the method in which module | onscroll mode ENTER functions
in ENTER mode it target executes animation by top scroll bar
meaning, ones it executes it has no control over the animation
this can easily lead to confusing web design, especially with animate OUT effects
use module | onscroll mode ANIMATOR to create top scroll bar guided animation if required
• a tool first and foremost
module | onscroll mode ENTER is just as JMPv3.0 in all - a - tool - first and foremost
how it is used can affect the outcome, always test if the outcome is the desired result!
• CSS3 animation be aware!
although CSS3 animation is a powerful enhancement to web design
it does not come without it's quirks
as always, any web design should be tested against different browsers
also be aware of the quirks when using CSS3 animation
ie.
- not all effects execute the same in all browsers (if at all)
- mouseover might disturb the execution of an effect while the effect occurs in some browsers
- an overflow on horizontal axis may activate on some effects
which can brake the page scroll completely in some browsers
the object is of course absolute positioned
Tip: set overflow-x to hidden - if design allows
- touch devices have there own quirks with CSS3 animation
especially when activated by the top scroll bar, they (most likely) should be turned off
see info here
• mode ENTER target execute be aware!
also be aware of the method in which module | onscroll mode ENTER functions
in ENTER mode it target executes animation by top scroll bar
meaning, ones it executes it has no control over the animation
this can easily lead to confusing web design, especially with animate OUT effects
use module | onscroll mode ANIMATOR to create top scroll bar guided animation if required
• a tool first and foremost
module | onscroll mode ENTER is just as JMPv3.0 in all - a - tool - first and foremost
how it is used can affect the outcome, always test if the outcome is the desired result!
Set this property by own judgment and design if required
NOTE: this property can be set to false (=ideal) with all animate.css CSS3 animation effects - as presented by JMPv3.0
NOTE: this property can be set to false (=ideal) with all animate.css CSS3 animation effects - as presented by JMPv3.0
ENTER BRAKE
The enter | brake property is another important property if we use WB CSS3 animation
The enter | brake property changes the method in which module | onscroll ENTER mode functions
Ideal we want this property to be disabled (=false) ... !
• If the enter | brake is disabled module | onscroll resets an object after it's animation completes
• If the enter | brake is enabled module | onscroll resets an object if it exits the window viewport
The latter is a less reliable method when using CSS3 animation, it forces a brake
WHY LESS RELIABLE ?
CSS3 animation includes transform animation, - rotate, skew, scale etc
What constitutes if an object is inside or outside the window viewport is relative
Imagine a full width layer just moving outside the top of the window viewport that rotates - (I recommend not to:)
That object would move in and out the window viewport
To reset a CSS3 animation based on the window viewport position is not a reliable reference
In it's ideal state module | onscroll waits until the animation completes, then resets, before it will activate the object again
There are however CSS3 effects, situations that require to change the method
Here are 2 examples in which we probably want to change the method and enable the enter | brake property
EXAMPLE 1 - ITERATION COUNT
Say we create a WB CSS3 animation spinner that we activate onscroll, the object activates and spins infinite - (ITERATION = -1)
If that object now moves out of the window viewport that object would remain spinning
Module | onscroll waits until the animation completes before it will activate the object again
This example shows that that will not happen for the object spins infinite
Here we probably want to enable the enter | brake property to force an animation brake when the object exits the window viewport
So it can activate again when it enters the window viewport
EXAMPLE 2 - FILL MODE (END STATE)
Say we create a WB CSS3 animation perspective change, ie. effect = perspective left with a fill mode forward
The object would have to remain in it's end state after the animation completes
Module | onscroll however will reset the object after the animation completes, which resets the object to it's original state
Here we want to change the method in which module | onscroll functions
Here we probably want to enable the enter | brake property to force an animation brake when the object exits the window viewport
So it can activate again when it enters the window viewport
The enter | brake property is another important property if we use WB CSS3 animation
The enter | brake property changes the method in which module | onscroll ENTER mode functions
Ideal we want this property to be disabled (=false) ... !
• If the enter | brake is disabled module | onscroll resets an object after it's animation completes
• If the enter | brake is enabled module | onscroll resets an object if it exits the window viewport
The latter is a less reliable method when using CSS3 animation, it forces a brake
WHY LESS RELIABLE ?
CSS3 animation includes transform animation, - rotate, skew, scale etc
What constitutes if an object is inside or outside the window viewport is relative
Imagine a full width layer just moving outside the top of the window viewport that rotates - (I recommend not to:)
That object would move in and out the window viewport
To reset a CSS3 animation based on the window viewport position is not a reliable reference
In it's ideal state module | onscroll waits until the animation completes, then resets, before it will activate the object again
There are however CSS3 effects, situations that require to change the method
Here are 2 examples in which we probably want to change the method and enable the enter | brake property
EXAMPLE 1 - ITERATION COUNT
Say we create a WB CSS3 animation spinner that we activate onscroll, the object activates and spins infinite - (ITERATION = -1)
If that object now moves out of the window viewport that object would remain spinning
Module | onscroll waits until the animation completes before it will activate the object again
This example shows that that will not happen for the object spins infinite
Here we probably want to enable the enter | brake property to force an animation brake when the object exits the window viewport
So it can activate again when it enters the window viewport
EXAMPLE 2 - FILL MODE (END STATE)
Say we create a WB CSS3 animation perspective change, ie. effect = perspective left with a fill mode forward
The object would have to remain in it's end state after the animation completes
Module | onscroll however will reset the object after the animation completes, which resets the object to it's original state
Here we want to change the method in which module | onscroll functions
Here we probably want to enable the enter | brake property to force an animation brake when the object exits the window viewport
So it can activate again when it enters the window viewport
WHAT DO THE VALUES REPRESENT ?
false = no brake occurs on window viewport exit (ideal)
1 = brake at window viewport exit - add a full object height to the activation point
2 = brake at window viewport exit - add halve the object height to the activation point
3 = brake at window viewport exit - add a 3th of the object height to the activation point
4 = brake at window viewport exit - add a 4th of the object height to the activation point
etc
So ... higher values decreases the activation point for the forced brake
WHEN DO I USE WHAT VALUE ?
The object resets on window viewport exit, it returns to it's original state
The state of the original object and the state of the animated object can differ vastly
Meaning, when the object resets it can jump from an animated state outside the window viewport, back into the viewport
This is of course not what we want to see, we want the object to be completely out of view when it resets
Not, out of view animated, then it resets, and suddenly appears inside the window viewport
But this all depends on the design, the size of the object, the sort of effect used etc
Let's take the perspective example used here above, we used a perspective left effect
Say we change that effect to a perspective up instead, the object flips up completely and remains in that state
Let's say the object in itself is 300px in height, when that object flips up it actually occupies 600px in height
Cause when the object exits the window viewport it resets back to it's original state
false = no brake occurs on window viewport exit (ideal)
1 = brake at window viewport exit - add a full object height to the activation point
2 = brake at window viewport exit - add halve the object height to the activation point
3 = brake at window viewport exit - add a 3th of the object height to the activation point
4 = brake at window viewport exit - add a 4th of the object height to the activation point
etc
So ... higher values decreases the activation point for the forced brake
WHEN DO I USE WHAT VALUE ?
The object resets on window viewport exit, it returns to it's original state
The state of the original object and the state of the animated object can differ vastly
Meaning, when the object resets it can jump from an animated state outside the window viewport, back into the viewport
This is of course not what we want to see, we want the object to be completely out of view when it resets
Not, out of view animated, then it resets, and suddenly appears inside the window viewport
But this all depends on the design, the size of the object, the sort of effect used etc
Let's take the perspective example used here above, we used a perspective left effect
Say we change that effect to a perspective up instead, the object flips up completely and remains in that state
Let's say the object in itself is 300px in height, when that object flips up it actually occupies 600px in height
Cause when the object exits the window viewport it resets back to it's original state
window viewport top
the animated object has exit the window viewport
now it resets back to it's original state
now it resets back to it's original state
the original state is still in the window viewport
original
animated
PERSPECTIVE UP EFFECT
In this example we want to use a value of 1 - for the object height itself needs to be added to the activation point
Now let's take the perspective left example itself, the object flips completely horizontal and remains in that state
The used space now however has not increased, the object still occupies 300px in height
The used space now however has not increased, the object still occupies 300px in height
window viewport top
original
animated
PERSPECTIVE LEFT EFFECT
the animated object has exit the window viewport
now it resets back to it's original state
not a problem the original state is the same
- outside the window viewport
now it resets back to it's original state
not a problem the original state is the same
- outside the window viewport
In this example we want to use a much higher value ie. 9
It means we only add a 9th of the object height before the activation point resets
Which would be 300 divided by 9 = 33.3
So, the activation point is increases by only 33.3px
It means we only add a 9th of the object height before the activation point resets
Which would be 300 divided by 9 = 33.3
So, the activation point is increases by only 33.3px
SUMMARY:
ANIMATE IN -------> VISIBILITY - hidden
ANIMATE OUT ------> VISIBILITY - visible
ANIMATE STATIC ---> VISIBILITY - hidden or visible static
ANIMATE IN -------> VISIBILITY - hidden
ANIMATE OUT ------> VISIBILITY - visible
ANIMATE STATIC ---> VISIBILITY - hidden or visible static
ENTER MARK DEFAULT - REMOVED
The onscroll method of module | onscroll mode enter has been rewritten for JMPv30 b5.6 to better suit RWD design
The enter | mark default property is no longer required and has been removed
The onscroll method of module | onscroll mode enter has been rewritten for JMPv30 b5.6 to better suit RWD design
The enter | mark default property is no longer required and has been removed
b5.6
-------------------------------------------------------------------------------------
New in JMPv3.0 b5.5 is the enter | callback | before property
In addition a new internal option can be set by $(this)[0] inside the callback
Enable/Force the offset to directly adjust to window resize
example:
$(this)[0].resizeOffset=true;
New in JMPv3.0 b5.5 is the enter | callback | before property
In addition a new internal option can be set by $(this)[0] inside the callback
Enable/Force the offset to directly adjust to window resize
example:
$(this)[0].resizeOffset=true;
b5.5
b5.4
b5.6
NEW IN BUILD 5.6
01. REMOVED
• mode enter:
the previous included animate.css CSS3 library has been removed, but is still available in a new method
this method requires the effect names to be changed with a new prefix
WARNING: reselect the previous used effects to activate them in JMPv3.0 b5.6
read more about this powerful new method here
02. REMOVED
• mode enter: the option enter | mark default has been removed
03. CHANGED
• mode enter: the option enter | fade in speed has been changed into enter | duration
the duration for all effects is now set in this property
NOTE: this property also overrides a selected WB CSS3 animation duration
01. REMOVED
• mode enter:
the previous included animate.css CSS3 library has been removed, but is still available in a new method
this method requires the effect names to be changed with a new prefix
WARNING: reselect the previous used effects to activate them in JMPv3.0 b5.6
read more about this powerful new method here
02. REMOVED
• mode enter: the option enter | mark default has been removed
03. CHANGED
• mode enter: the option enter | fade in speed has been changed into enter | duration
the duration for all effects is now set in this property
NOTE: this property also overrides a selected WB CSS3 animation duration
5
-------------------------------------------------------------------------------------
New in JMPv3.0 b5.62 is the enter | callback | while property
The while callback can be used to create a new functions on the object scroll position
The while callback triggers on the object scroll position, the before/after callback trigger on the object effect
The while callback returns several arguments
New in JMPv3.0 b5.62 is the enter | callback | while property
The while callback can be used to create a new functions on the object scroll position
The while callback triggers on the object scroll position, the before/after callback trigger on the object effect
The while callback returns several arguments
• fn: while: function (object,top,topEnd,inview,dir) { }
object = returns current object
top = returns current object top position - 0=object top has past viewport top
topEnd = returns current object top + height - 0=object bottom has past viewport top
inview = returns true if current object is in the viewport
dir = returns current object direction
1 = is coming from the bottom
2 = is coming from the top
object = returns current object
top = returns current object top position - 0=object top has past viewport top
topEnd = returns current object top + height - 0=object bottom has past viewport top
inview = returns true if current object is in the viewport
dir = returns current object direction
1 = is coming from the bottom
2 = is coming from the top
b5.62