Transitions - Different Styles
Use any CSS3 transition you want. For cubic-bezier, I recommend this generator.
$('.scotch-panel').scotchPanel({
containerSelector: 'section', /* Finds the closes parent matching this */
direction: 'left',
duration: 2000,
distanceX: '100%',
enableEscapeKey: true
});
<section class="linear">
<div class="scotch-panel" data-clickSelector="section.linear, .all-same-time" data-transition="linear">
<h2>Linear</h2>
</div>
<h2>Linear</h2>
</section>
<section class="ease">
<div class="scotch-panel" data-clickSelector="section.ease, .all-same-time" data-transition="ease">
<h2>Ease</h2>
</div>
<h2>Ease</h2>
</section>
<section class="ease-in">
<div class="scotch-panel" data-clickSelector="section.ease-in, .all-same-time" data-transition="ease-in">
<h2>Ease-in</h2>
</div>
<h2>Ease-in</h2>
</section>
<section class="ease-out">
<div class="scotch-panel" data-clickSelector="section.ease-out, .all-same-time" data-transition="ease-out">
<h2>Ease-out</h2>
</div>
<h2>Ease-out</h2>
</section>
<section class="ease-in-out">
<div class="scotch-panel" data-clickSelector="section.ease-in-out, .all-same-time" data-transition="ease-in-out">
<h2>Ease-in-out</h2>
</div>
<h2>Ease-in-out</h2>
</section>
<section class="cubic">
<div class="scotch-panel" data-clickSelector="section.cubic, .all-same-time" data-transition="cubic-bezier(.76,-0.52,.33,1.02)">
<h2>cubic-bezier(.76,-0.52,.33,1.02)</h2>
</div>
<h2>cubic-bezier(.76,-0.52,.33,1.02)</h2>
</section>