Scrollmagic Pinned Section Animation 2

Example of pinned scroll-position-driven animation using ScrollMagic.js and GSAP.

by the_voder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<!-- Attempt to use semantic HTML tags
<section> defines a visual section the page.
Container <div> is generic -->

<section id="article1">
    <h2>Section 1</h2>
</section>
<section id="article2">
      <h2>Section 2</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, modi dolores distinctio, pariatur inventore quaerat nesciunt quibusdam, reprehenderit illum mollitia neque? Voluptas cupiditate nostrum nobis reiciendis labore exercitationem omnis nesciunt.</p>
     <p>Molestias similique in quisquam earum. Hic ducimus ea mollitia, fugiat vitae earum veritatis at quasi laboriosam exercitationem ullam corrupti molestiae error, voluptate quae explicabo iusto, repudiandae dignissimos voluptates a itaque!</p>
     <p>Officia mollitia, tempora iste, maxime beatae labore quaerat, eligendi repellendus quos libero impedit tenetur explicabo quam. Rem, assumenda. Recusandae nostrum ipsam facilis dignissimos, ut quaerat sed repellendus aliquid voluptatem. Quas.</p>
</section>
<section id="article3">
    <h2>Section 3</h2>
</section>

CSS

/*
Set box-sizing so elements do not expand when padding and borders added (because, why would you want that?)
https://css-tricks.com/box-sizing/ */

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
}

/* Applies to all section elements */
section {
    margin: 0;
   /*  Section is full size of viewport using viewport-relative vw/vh units */
	  width: 100vw;
    height: 100vh;
    padding: 20px;
}

p {
  margin: 0;
  padding: 0;
}

JavaScript

/*
Scroll-driven horizontal slideshow in section of page using pinning.
Requires ScrollMagic and GSAP.

NOTE:
Values are hard-coded in this example for a slideshow consisting of 4 slides. A more flexible approach could be taken, with a little extra code (and a tiny bit of maths), that would work with an arbitrary number of slides.
*/

$(document).ready(function() {
	
	// Init
	var controller = new ScrollMagic.Controller();
	
	// Define movement of panels (basic horizontal slide)
    var anim = new TimelineMax()
         // Animate to second panel
         .to(".slideContainer", 1.0, {x: "-25%"})
         .to(".slideContainer", 1.0, {x: "-25%"},"-=1.0")
         
	
	// Create scene for pin and link animation
	new ScrollMagic.Scene({
			triggerElement: "#article2",
			triggerHook: "onLeave"
		})
		.setPin("#article2")
		.setTween(anim)
		.addIndicators() // Add indicators (requires plugin)
		.addTo(controller);

});