A Pen by Daniel.

HowTo-:-ScrollMagic-Paneling.markdown

HowTo : ScrollMagic Paneling

Demo for ScrollMagic. Customized by making the layout liquid and using transforms w/multiple panel transitions to create cool sliding effects that are curtain-esque.

http://janpaepke.github.io/ScrollMagic

Forked from Dennis Gaebel's Pen HowTo : ScrollMagic Paneling.

A Pen by Daniel on CodePen.

License.

index.html

<div id="content-wrapper">

    <section id="pin" class="scroll-magic-section">
        <h3 id="hlpin">Pinned Yo!</h3>

        <div id="wipe">
            <div class="container">
                <h3>Wipe Uno TranslateY</h3>
            </div>
        </div>

        <div id="second-wipe">
            <div class="container">
                <h3>Wipe Dos TranslateY</h3>
            </div>
        </div>

        <div id="slide">
            <div class="container">
                <h3>Slide Bounce Brosicle</h3>
                <h3> ZOMG Colors!</h3>
            </div>
        </div>
    
    <div id="slide-dos">
            <div class="container">
                <h3>Slide TranslateX</h3>
            </div>
        </div>

        <div id="unpin">
            <div class="container">
                <h3>Unpinzd Dawg</h3>
            </div>
        </div>

    </section>
</div>

script.js

// init the controller
var controller = new ScrollMagic({
    globalSceneOptions: {
        triggerHook: "onLeave"
    }
});


// pinani
var pinani = new TimelineMax()
    // panel wipe uno
    .add(TweenMax.to("#wipe", 1, {transform: "translateY(0)"}))

    // panel wipe dos
    .add(TweenMax.to("#second-wipe", 1, {transform: "translateY(0)"}))

    // panel slide bounce
    .add(TweenMax.to("#slide", 1, {top: "0%", ease: Bounce.easeOut, delay: 0.2}))

    // panel slide color
    .add([
        TweenMax.to("#slide h3:first-child", 0.2, {autoAlpha: 0}),
        TweenMax.from("#slide h3:last-child", 0.2, {autoAlpha: 0})
    ])
    .add([
        TweenMax.to("#slide", 0.3, {backgroundColor: "yellow"}),
        TweenMax.to("#slide h3:last-child", 0.3, {color: "blue"})
    ])
    .add([
        TweenMax.to("#slide", 0.3, {backgroundColor: "green"}),
        TweenMax.to("#slide h3:last-child", 0.3, {color: "red"})
    ])
    .add([
        TweenMax.to("#slide", 0.3, {backgroundColor: "red"}),
        TweenMax.to("#slide h3:last-child", 0.3, {color: "white"})
    ])
    .add([
        TweenMax.to("#slide", 0.3, {backgroundColor: "#c7e1ff"}),
        TweenMax.to("#slide h3:last-child", 0.3, {color: "black"})
    ])

    // panel slide translateX
    .add(TweenMax.to("#slide-dos", 1, {transform: "translateX(0)"}))

    // panel unpinned
    .add(TweenMax.from("#unpin", .5, {top: "100%"}));


// panel section pin
new ScrollScene({
        triggerElement: "section#pin",
        duration: 1100
    })
    .setTween(pinani)
    .setPin("section#pin")
    .addTo(controller);

style.scss

@import "compass/css3";
// General Styles
// ====================================================================

body {
    background: #c7e1ff;
    font-family: "Source Sans Pro", Arial, sans-serif;
    font-size: 13px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body,
html {
    height: 100%
}

h1,
h2,
h3,
h4 {
    font-family: "Josefin Slab", serif;
    font-weight: bold;
}

h1 {
    font-style: italic;
    font-weight: bold;
    font-size: 22px;
}

h2 {
    font-size: 18px;
}

.noselect * {
    user-select: none;
}


// ScrollMagic Containers
// ====================================================================

.container {
    height: 100%;
    margin: 0 auto;
    max-width: 900px;
    position: relative;
    width: 100%;
}

#content-wrapper {
    height: 100%;
    min-height: 500px;
    width: 100%;
}

.scroll-magic-section {
    height: 100%;
}

// ScrollMagic Pin Panel
// ====================================================================

#pin {
    overflow: hidden;
    width: 100%;

    h3 {
        margin: -40px 0 0 0;
        position: relative;
        top: 50%;
        font-size: 80px;
        line-height: 80px;
        text-align: center;
    }
}


// ScrollMagic Wipe Panels
// ====================================================================

#wipe {
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(100%);
    width: 100%;
    background: #2e639e;

    h3 {
        color: white;
    }
}

#second-wipe {
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(100%);
    width: 100%;
    background: red;
}


// ScrollMagic Slide Panels
// ====================================================================

#slide {
    height: 100%;
    position: absolute;
    top: -100%;
    width: 100%;
    background: #c7e1ff;

    h3 {
        position: absolute;
        width: 100%;
    }
}

#slide-dos {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    width: 100%;
    background: tan;
}


// ScrollMagic Unpin Panel
// ====================================================================

#unpin {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    background: maroon;
}