animate | break on
with the  animate | break on  property we can set the amount of animations to occur for the selected object
module | onscroll  allows 4 animations per object per page
see more info on the architecture of  module | onscroll  here

animate | auto height
setting this property to true enables automatic scroll height
the document will auto adjust it's height to fit the amount of scrolled animation
disabling can be useful if the scrolled object is animated near the bottom of our design  ie.  a vertical top out animation
NOTE: auto height is set for this object (for all 4 animations)

animate | horizontal scroll
module | onscroll repositions each object into a  fixed  window position
with this property we can enable the repositioned object to abide the horizontal scrollbar
•••• var: non-string

ANIMATE 1:

1 | scroll start
scroll start sets the position of the top scrollbar that activates the 1st animation
this  scroll start  is the  first and only actual start position of the animated timeline
each subsequent starting point occurs in sequence to this start point
NOTE: the input can be a number value, jQuery object, calculation, function  or  predefined command
predefined command:
com:mark=Bookmark1/0       =  use an absolute positioned object as target (by id)
                              the TOP START POSITION of the scrolled object becomes the threshold
                              set an additional offset after the slash (neg/pos)
com:markE=Bookmark1/0      =  use an absolute positioned object as target (by id)
                              the TOP END POSITION  of the scrolled object becomes the threshold
                              set an additional offset after the slash (neg/pos)
com:marklimit=Bookmark1/0  =  use an absolute positioned object as target (by id)
                              an invisible line, limit, becomes the threshold
                              the limit is set after the slash (neg/pos)
com:markenter=Bookmark1/0  =  use an absolute positioned object as target (by id)
                              the point of viewport entry of the mark becomes the threshold
                              set an additional offset after the slash (neg/pos)

see more info on the architecture of  module | onscroll  here
•••• var: function

1 | scroll duration
scroll duration is the amount of pixels the top scrollbar scrolls from start to end of the animation
the speed of the animation is determined by the distance the object travels in relation to the duration
NOTE: the input can be a number value, jQuery object, calculation, function  or  predefined command
predefined command:
com:staticT=0 or 2%        =  object scrolls with same speed as page - vertical
                              set optional offset duration (neg/pos) in pixel or percentage mode
com:staticL=0 or 2%        =  object scrolls with same speed as page - horizontal
                              set optional offset duration (neg/pos) in pixel or percentage mode
com:mark=Bookmark1/0       =  use an absolute positioned object as target (by id)
                              the TOP START POSITION of the scrolled object becomes the threshold
                              set an additional offset after the slash (neg/pos)
com:markE=Bookmark1/0      =  use an absolute positioned object as target (by id)
                              the TOP END POSITION  of the scrolled object becomes the threshold
                              set an additional offset after the slash (neg/pos)
com:marklimit=Bookmark1/0  =  use an absolute positioned object as target (by id)
                              an invisible line, limit, becomes the threshold
                              the limit is set after the slash (neg/pos)
com:markenter=Bookmark1/0  =  use an absolute positioned object as target (by id)
                              the point of viewport entry of the mark becomes the threshold
                              set an additional offset after the slash (neg/pos)

see more info on the architecture of  module | onscroll  here
•••• var: function

1 | position | LEFT start
set the left  start  position of the object
NOTE: the input can be a number value, jQuery object, calculation, function  or  predefined command
predefined command:
com:left=100    =  start the object on 100px left of the window viewport
com:left=c100   =  start the object on 100px left relative to a WB centered page
                   if page center is enabled
                   else the object is positioned at 100px left of the window viewport
com:left=C100   =  new in JMPv3.0 b5.6 the command capital C
                   the object is positioned at page center and a pos/neg value can be set to
                   position the object left/right of center
com:left=out    =  start the object far left, outside the window viewport
com:left=self   =  start the object at the left as is positioned in WB
                   WARNING:
                   the command  self  should  NOT  be used in combination with RWD design
                   the command  self  is not dynamic
                   it's point of entry (breakpoint) becomes it's point of origin

com:right=-50   =  start the object minus 50px from the right side of the window viewport
com:right=out   =  start the object far right, outside the window viewport

see more info on the architecture of  module | onscroll  here
•••• var: function

1 | position | LEFT end
set the left  end  position of the object
NOTE: the input can be a number value, jQuery object, calculation, function  or  predefined command
predefined command:
com:left=100    =  end the object on 100px left of the window viewport
com:left=c500   =  end the object on 500px left relative to a WB centered page
                   if page center is enabled
                   else the object is positioned at 500px of the window viewport
com:left=C100   =  new in JMPv3.0 b5.6 the command capital C
                   the object is positioned at page center and a pos/neg value can be set to
                   position the object left/right of center
com:left=out    =  end the object far left, outside the window viewport
com:left=self   =  end the object at the left as is positioned in WB
                   WARNING:
                   the command  self  should  NOT  be used in combination with RWD design
                   the command  self  is not dynamic
                   it's point of entry (breakpoint) becomes it's point of origin
com:right=-50   =  end the object minus 50px from the right side of the window viewport
com:right=out   =  end the object far right, outside the window viewport

see more info on the architecture of  module | onscroll  here
•••• var: function

1 | position | TOP start
set the top  start  position of the object
NOTE: the input can be a number value, jQuery object, calculation, function  or  predefined command
predefined command:
com:top=100     =  start the object on 100px top of the window viewport
com:top=out     =  start the object far top, outside the window viewport
com:top=self    =  start the object at the top as is positioned in WB
                   WARNING:
                   the command  self  should  NOT  be used in combination with RWD design
                   the command  self  is not dynamic
                   it's point of entry (breakpoint) becomes it's point of origin
com:bottom=-50  =  start the object minus 50px from the bottom of the window viewport
com:bottom=out  =  start the object far bottom, outside the window viewport

see more info on the architecture of  module | onscroll  here
•••• var: function

1 | position | TOP end
set the top  end  position of the object
NOTE: the input can be a number value, jQuery object, calculation, function  or  predefined command
predefined command:
com:top=100     =  end the object on 100px top of the window viewport
com:top=out     =  end the object far top, outside the window viewport
com:top=self    =  end the object at the top as is positioned in WB
                   WARNING:
                   the command  self  should  NOT  be used in combination with RWD design
                   the command  self  is not dynamic
                   it's point of entry (breakpoint) becomes it's point of origin
com:bottom=-50  =  end the object minus 50px from the bottom of the window viewport
com:bottom=out  =  end the object far bottom, outside the window viewport

see more info on the architecture of  module | onscroll  here
•••• var: function

1 | fade mode
set the fade mode of the object or disable
fadein   =  fade in
fadeout  =  fade out
none     =  fade is not used
•••• var: string

1 | callback | on scroll
add a new function on animation scroll
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here - see also  here
   • fn: callEnter1: function (id,scroll,duration) { }
   id        = returns the id/(selector) of the current object - exm. #Layer1
   scroll    = returns a nullified scrollbar position
   duration  = returns the duration of the current animation


ANIMATE 2:

2 | scroll delay
scroll delay sets the delay time before the top scroll position activates the next animation
NOTE: the input can be a number value, jQuery object, calculation, function  or  predefined command
predefined command:
com:mark=Bookmark1/0       =  use an absolute positioned object as target (by id)
                              the TOP START POSITION of the scrolled object becomes the threshold
                              set an additional offset after the slash (neg/pos)
com:markE=Bookmark1/0      =  use an absolute positioned object as target (by id)
                              the TOP END POSITION  of the scrolled object becomes the threshold
                              set an additional offset after the slash (neg/pos)
com:marklimit=Bookmark1/0  =  use an absolute positioned object as target (by id)
                              an invisible line, limit, becomes the threshold
                              the limit is set after the slash (neg/pos)
com:markenter=Bookmark1/0  =  use an absolute positioned object as target (by id)
                              the point of viewport entry of the mark becomes the threshold
                              set an additional offset after the slash (neg/pos)

see more info on the architecture of  module | onscroll  here
•••• var: function

2 | scroll duration
scroll duration is the amount of pixels the top scrollbar scrolls from start to end of the animation
the speed of the animation is determined by the distance the object travels in relation to the duration
NOTE: the input can be a number value, jQuery object, calculation, function  or  predefined command
predefined command:
com:staticT=0 or 2%        =  object scrolls with same speed as page - vertical
                              set optional offset duration (neg/pos) in pixel or percentage mode
com:staticL=0 or 2%        =  object scrolls with same speed as page - horizontal
                              set optional offset duration (neg/pos) in pixel or percentage mode
com:mark=Bookmark1/0       =  use an absolute positioned object as target (by id)
                              the TOP START POSITION of the scrolled object becomes the threshold
                              set an additional offset after the slash (neg/pos)
com:markE=Bookmark1/0      =  use an absolute positioned object as target (by id)
                              the TOP END POSITION  of the scrolled object becomes the threshold
                              set an additional offset after the slash (neg/pos)
com:marklimit=Bookmark1/0  =  use an absolute positioned object as target (by id)
                              an invisible line, limit, becomes the threshold
                              the limit is set after the slash (neg/pos)
com:markenter=Bookmark1/0  =  use an absolute positioned object as target (by id)
                              the point of viewport entry of the mark becomes the threshold
                              set an additional offset after the slash (neg/pos)

see more info on the architecture of  module | onscroll  here
•••• var: function

2 | position | LEFT end
set the left  end  position of the object
NOTE: the input can be a number value, jQuery object, calculation, function  or  predefined command
predefined command:
com:left=100    =  end the object on 100px left of the window viewport
com:left=c500   =  end the object on 500px left relative to a WB centered page
                   if page center is enabled
                   else the object is positioned at 500px of the window viewport
com:left=C100   =  new in JMPv3.0 b5.6 the command capital C
                   the object is positioned at page center and a pos/neg value can be set to
                   position the object left/right of center
com:left=out    =  end the object far left, outside the window viewport
com:left=self   =  end the object at the left as is positioned in WB
                   WARNING:
                   the command  self  should  NOT  be used in combination with RWD design
                   the command  self  is not dynamic
                   it's point of entry (breakpoint) becomes it's point of origin
com:right=-50   =  end the object minus 50px from the right side of the window viewport
com:right=out   =  end the object far right, outside the window viewport

see more info on the architecture of  module | onscroll  here
•••• var: function

2 | position | TOP end
set the top  end  position of the object
NOTE: the input can be a number value, jQuery object, calculation, function  or  predefined command
predefined command:
com:top=100     =  end the object on 100px top of the window viewport
com:top=out     =  end the object far top, outside the window viewport
com:top=self    =  end the object at the top as is positioned in WB
                   WARNING:
                   the command  self  should  NOT  be used in combination with RWD design
                   the command  self  is not dynamic
                   it's point of entry (breakpoint) becomes it's point of origin
com:bottom=-50  =  end the object minus 50px from the bottom of the window viewport
com:bottom=out  =  end the object far bottom, outside the window viewport

see more info on the architecture of  module | onscroll  here
•••• var: function

2 | fade mode
set the fade mode of the object or disable
fadein   =  fade in
fadeout  =  fade out
none     =  fade is not used
•••• var: string

2 | callback | on scroll
add a new function on animation scroll
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here - see also  here
   • fn: callEnter2: function (id,scroll,duration) { }
   id        = returns the id/(selector) of the current object - exm. #Layer1
   scroll    = returns a nullified scrollbar position
   duration  = returns the duration of the current animation


ANIMATE 3 + 4:

          NOTE animate 3 and 4  are a repeat of  animate 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_OnScroll_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 | onscroll   see here Overview Enter
more info on   module | onscroll   see here Overview Animator
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 Online Tutorials
MODULE ONSCROLL - PROPERTIES
b5.1
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
STRUCTURE: function (e) {  javascript before - init - callback - javascript after  }

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
•••• var: string
onscroll | mode
set  module | onscroll  mode to operate in, 2 modes are available  -   01. ANIMATOR   and   02. ENTER
from   JMPv3.0 b5.4   on  module | onscroll  consists of 2 modes
ANIMATOR = object is repositioned in fixed position then animates along setup of rules/commands
ENTER    = object retains absolute position and animates into the window viewport, target execute
           (jquery fade or CSS3 animation)


global disable | ignore
from   JMPv3.0 b5.4   on module | onscroll functions can global be disabled for touch devices
each onscroll function however can also be set to ignore the  onscroll global disable  function
true  = ignore global disable
false = abide global disable and the object remains visible
-1    = abide global disable and the object is removed

see more info here
•••• var: non-string
enter | mode
set  the effect mode for the object to enter the window viewport by, - 3 modes are available
JQUERY FADE       = object animates into the window viewport by - jquery animation (fadein)
ANIMATE.CSS       = object animates into the window viewport by - animate.css CSS3 animation
WB CSS3 ANIMATION = object animates into the window viewport by - WB CSS3 animation setup

•••• var: string

enter | once
set the amount of times the animation will execute, once (true), always (false)  or  a number for the amount of times to execute
•••• var: non-string

enter | offset
set position enter  offset  in  percentage
offset the moment (delay) on which an animation activates inside the window viewport
•••• var: non-string

enter | duration
set the effect duration
NOTE: from  JMPv3.0 b5.6  on the duration applies to all effect modes  jquery fade, animate.css and WB CSS3 animation
•••• var: non-string

enter | 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
     NOTE: this setting applies to CSS3 animation only
•••• var: string

enter | visibility
set the visibility state of the object entering the viewport   hidden   or   visible   or   visible static
this important property is used in combination with the   enter | mode   and the   enter | offset   property
see more info into this property here
•••• var: string

enter | brake
enable a forced animation brake when the object exits the window viewport
this is an important property when using WB CSS3 animation
the   enter | brake  property changes the method in which  module | onscroll  ENTER mode  functions
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
etc

see more info into this property here
•••• var: non-string

enter | callback | before   &   enter | callback | after
add a new function before and after the animation executes
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here - see also  here
   • fn: before/after: function (object) { }
   object = returns current object

enter | callback | while
add a new function while the object scrolls
the callback function in full range is beyond the scope of this manual
for an in depth on callback and run on call see here - see also  here
   • 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
b5.4
b5.4
MODE ENTER
b5.4
MODE ANIMATOR
b5.5
b5.5
b5.6
b5.6
b5.6
PLUGIN
b5.6
b5.62
b5.62