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>
                
                
All Same Time

Linear

Linear

Ease

Ease

Ease-in

Ease-in

Ease-out

Ease-out

Ease-in-out

Ease-in-out

cubic-bezier(.76,-0.52,.33,1.02)

cubic-bezier(.76,-0.52,.33,1.02)