Basics 1E - Easing

This is a carousel with a custom timing function called easeInOutBack that changes the acceleration of the turn to something more interesting instead of the default ease transition.

ease (default)		easeInOutBack
	vs.

As you turn this carousel, notice how it spins back a little and then over-rotates before snapping into place.

Usage:

1. To specify a custom timing function, just override the .panther-Carousel-carousel style with four points from a cubic bezier curve.

   
   <style>
   .panther-Carousel-carousel {
       /* easeInOutBack: */
       -webkit-transition: all 1000ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
       -webkit-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
       -moz-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
       -o-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
       transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
   }
   </style>
                                   

   Instead of trying to invent a curve yourself, you can find some interesting ones on Ceaser - CSS Easing Animation Tool (http://matthewlein.com/ceaser/)