ScrollMagic Spin

index.html

<header role="banner">
  <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/392/demo_tophat.png" width="64" height="auto" alt="scroll magic">
  <nav role='navigation'>
    <a href="#intro" id="intro-anchor">Intro</a>
    <a href="#pinned-trigger1" id="anchor1">Section 1</a>
    <a href="#pinned-trigger2" id="anchor2">Section 2</a>
    <a href="#pinned-trigger3" id="anchor3">Section 3</a>
  </nav>
</header>

<main class="full-screen" role="main">
  <section id="intro" class="full-screen blue">
    <div>
      <h1>Basic Pin</h1>
      <p>Elements are pinned for their respective pixel value set as the duration and released again.</p>
    </div>
  </section>

  <section id="pinned-trigger1" class="full-screen orange">
    <div id="pinned-element1">
      <p>This element will be pinned once it's trigger hits the top of the viewport and will have a duration of window height minus 100</p>
    </div> 
  </section>

  <section id="pinned-trigger2" class="full-screen red">
    <div id="pinned-element2">
      <p>This element will be pinned for a duration of 150px</p>
    </div>
  </section>
  
  <section id="pinned-trigger3"class="full-screen blue">
    <div>
      <p>Section Four!</p>
    </div>
  </section>
  
  <section class="full-screen red">
    <div>
      <p>Section Five!</p>
    </div>
  </section>
  
  <section class="full-screen orange">
    <div>
      <p>Section Six!</p>
    </div>
  </section>
</main>

script.js

// init ScrollMagic Controller
var controller = new ScrollMagic.Controller({
  globalSceneOptions: {
    duration: $('section').height(),
    triggerHook: .025,
    reverse: true
  }
});

// Scene Handler
var scene1 = new ScrollMagic.Scene({
  triggerElement: "#pinned-trigger1", // point of execution
  duration: $(window).height() - 100, // pin element for the window height - 1
  triggerHook: 0, // don't trigger until #pinned-trigger1 hits the top of the viewport
  reverse: true // allows the effect to trigger when scrolled in the reverse direction
})
.setPin("#pinned-element1") // the element we want to pin
.addTo(controller);

// Scene2 Handler
var scene2 = new ScrollMagic.Scene({
  triggerElement: "#pinned-trigger2", // point of execution
  duration: 200 // pin the element for a total of 400px
})
.setPin("#pinned-element2") // the element we want to pin
.addTo(controller);

var scene3 = new ScrollMagic.Scene({ triggerElement: '#intro' })
                                .setClassToggle('#intro-anchor', 'active')
                                .addTo(controller);
var scene4 = new ScrollMagic.Scene({ triggerElement: '#pinned-trigger1' })
                                .setClassToggle('#anchor1', 'active')
                                .addTo(controller);
var scene5 = new ScrollMagic.Scene({ triggerElement: '#pinned-trigger2' })
                                .setClassToggle('#anchor2', 'active')
                                .addTo(controller);
var scene6 = new ScrollMagic.Scene({ triggerElement: '#pinned-trigger3' })
                                .setClassToggle('#anchor3', 'active')
                                .addTo(controller);

// Change behaviour of controller
// to animate scroll instead of jump
controller.scrollTo(function(target) {

  TweenMax.to(window, 0.5, {
    scrollTo : {
      y : target,
      autoKill : true // Allow scroll position to change outside itself
    },
    ease : Cubic.easeInOut
  });

});

$(document).on("click", "a[href^=#]", function(e) {
  var id = $(this).attr("href");

  if($(id).length > 0) {
    e.preventDefault();

    // trigger scroll
    controller.scrollTo(id);

    // If supported by the browser we can also update the URL
    if (window.history && window.history.pushState) {
      history.pushState("", document.title, id);
    }
  }

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/ScrollToPlugin.min.js"></script>

ScrollMagic Spin.markdown

ScrollMagic Spin

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 GRAY GHOST's Pen HowTo : ScrollMagic Paneling.

A Pen by bfodeke on CodePen.

License.

style.css

html,
body {
  margin: 0;
  height: 100%
}

h1,
p {
  margin: 0;
  padding: 0;
}

header {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 100%;
}
header nav {
  float: right;
  margin-right: 20px;
  margin-top: 10px;
}

a.active {
  color: #000;
  text-decoration: underline;
}

section {
  text-align: center;
  color: #EFEFEF;
}

.full-screen {
  height: 100%; /* makes panels the entire window height */
}

.blue {
  display: flex;
  justify-content: center;
  align-items: center;
}

.blue {
    background-color: #3883d8;
}
.red {
    background-color: #cf3535;
}
.orange {
    background-color: #ea6300;
}

styles

<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic|Josefin+Slab:400,700,700italic" rel="stylesheet" />