TransitionsJS demo - Custom Easing on Specifc Panels

Here is the the way to setup transitionsJS using custom easing functions. TransitionsJS is a library made to control panels sliding in and off the screen.

by Nicholas Dunbar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdn.rawgit.com/nicholasdunbar/transitionsJS/master/js/transitions/transitions.js"></script>
<!--
Demo of how to make your own "paralax" style scroller
while applying specific scroll driven easing functions
on a specific slider.

In this case I wanted my top slider to be already in the
middle of the screen instead of scrolling on the screen
and I wanted my last slider not to scroll off the screen.

Section elements used to control the scrolling 
of the slider elements below. As the top of the 
div slides under the view port this triggers
the ease in function from jquery.easing.js
as you scroll near the middle of the div ease
out functions will be triggered.    

Watch closely the boundaries of 
<div id="section-skills" class="sections">
as it scrolls by and compare what happends to 
<div id="skills">skills</div>
-->

<!--
See Fiddle Options at left for the body tag:
<body onload="startScroll()" >
-->

<div id="section-skills" class="sections">1</div>
<div id="section-quote1" class="sections">2</div>
<div id="section-brand" class="sections">3</div>
<div id="section-career" class="sections">4</div>
<div id="section-quote2" class="sections">5</div>
<!--
slider elements that will be transitioned using 
equations as slider elements scroll by the 
normal view port
-->
<div id="skills" class="band">skills</div>
<div id="quote1" class="band">quote1</div>
<div id="brand" class="band">brand</div>
<div id="career" class="band">career</div>
<div id="quote2" class="band">quote2</div>
<!--
Note: not a paralax scroller in the truest definition
of the word, it just happends that this is what people
often mislabel as a paralax scroller.
-->

CSS

@charset "UTF-8";
/* 
transitions.css 
*/

/*
applied to all elements that are being eased in and out
as you scroll. This is provided normally in the transitions.css file on GitHub
https://github.com/nicholasdunbar/transitionsJS
*/
.sliders{
	visibility:hidden;
	position:relative;
	width:100%;
	display:block;
}
/*
containers that hold the sliders
This is provided normally in the transitions.css 
file on GitHub
https://github.com/nicholasdunbar/transitionsJS
*/
.wrapper{
	display:block;
	width:100%;
	position:fixed;
	top:0;
}

/* 
your-custom.css 
*/

/*
Here I just make sure that each sections div has a height
so it is scrollable and I added in a dashed border so you could see each section scroller more clearly.
*/
.sections {
	width:100%;
	border-style:dashed;
	border-width:medium;
	border-color:#3F0;
	display:block;
	height:2000px;
/*
You can overlap the sections to achieve the effect
of one scrolling out while the other scrolls in*/
    margin-top:-900px;
}
/*
custom height of the panels being transitioned in and out
*/
.band {
	width:100%;
	border-style:dashed;
	border-width:medium;
	border-color:#000;
	display:block;
	height:100px;
}
/*
Make scroll start earlier by moving the first sections div up
*/
#section-skills{
    margin-top:-10px;
}

JavaScript

function startScroll(){
 $(document).ready
  (
  function() 
  { 
   //set up transitions
   var transitions = new Transitions();
   //set default easing functions  
   //from jquery.easing.js
   transitions.setEaseIn('easeInOutQuint');
   transitions.setEaseOut('easeInOutQuint');
   
   //CUSTOM EASE IN & OUT FUNCTION FOR TOP:
   //create custom function that acts as 
   //the in and out transitions/easing 
   //for the panel/slider called brand
   var topCustomInOutTransition = function 
   (
    currentTime, 
    beginningValue, 
    changeInValue, 
    durationTime, 
    direction, 
    sliderSelector
   ) 
   {
    var sliderHeight = $(sliderSelector).outerHeight();
    var centerPoint = ($(window).height()-sliderHeight) / 2;
    changeInValue = centerPoint+sliderHeight+5;
    beginningValue = centerPoint+sliderHeight;
    var y = $.easing.easeInOutQuint
    (
     1, 
     ((currentTime/2)-150)+((durationTime/2)-150),
     beginningValue, 
     changeInValue, 
     durationTime
    );
    //define transform
    $(sliderSelector).css('top', y);
   }//end topCustomInOutTransition
   
   //now define element you want to slide using a custom 
   //transition/easing in and out function
   transitions.addSlider
   (
    '#skills',
    '#section-skills', 
    null, 
    null, 
    topCustomInOutTransition
   );
   
   //CUSTOM JQUERY EASE IN & OUT FUNCTIONS:
   //extend the easing library.
   $.easing.linearTween = function (x, t, b, c, d) {
    return c*t/d + b;
   };
   //define a second element you want to 
   //scroll using ease in and out equations 
   //from the custom one you added and the 
   //easeInOutQuint already in the jQuery 
   //$.easing library
   transitions.addSlider
   (
    '#quote1', 
    '#section-quote1', 
    'linearTween', 
    'easeInOutQuint'
   );
     
   //define the elements you want to scroll in and out
   //using the default functions defined in
   //transitions.setEaseOut('easeInOutQuint'); (see above)
   //example of...