Simple ScrollMagic Tutorial

index.html

<section id="one">
    <div class="inner innerS1">
        <h1>Simple ScrollMagic Tutorial</h1>
        <p>Learn how to create a <strong>simple scrolling website</strong> using ScrollMagic</p>
    </div>
</section>
<section id="two">
    <div class="innerText innerS2">
        <h2>Why to learn ScrollMagic?</h2>
        <ul class="features">
            <li>It's great for <strong>story telling websites</strong></li>
            <li>It gives you <strong>endless creative power</strong></li>
            <li>It's <strong>easy to use</strong> once you get it</li>
        </ul>
    </div>
</section>
<section id="three">
  <div class="innerText innerS3">
      <h2>When to use ScrollMagic?</h2>
      <ul class="features">
        <li>When building <strong>interactive infographics</strong></li>
        <li>When introducing your <strong>product or service</strong></li>
        <li>When sharing your <strong>unique story or timeline</strong></li>
      </ul>
  </div>
</section>
<section id="four">
    <div class="innerText innerS4">
  <h2>Want to learn more about ScrollMagic?</h2>
      <ul class="features">
        <li>Read the full article <a href="https://ihatetomatoes.net/simple-scrollmagic-tutorial/">Simple ScrollMagic Tutorial</a></li>
      </ul>
  </div>
    <div class="iphone">
        <p class="screen screenHat"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/107366/img_scrollMagic.png" /></p>
        <p class="screen screenA">A</p>
        <p class="screen screenB">B</p>
        <p class="screen screenC">C</p>
    </div>
</section>

script.js

var wh = window.innerHeight,
	$iphone = $('.iphone'),
	$innerS1 = $('.innerS1'),
	$innerS2 = $('.innerS2'),
	$innerS3 = $('.innerS3'),
	$innerS4 = $('.innerS4'),
	$screenHat = $('.screenHat'),
	$screenA = $('.screenA'),
	$screenB = $('.screenB'),
	$screenC = $('.screenC');

	// init
	var ctrl = new ScrollMagic.Controller({
	    globalSceneOptions: {
	        triggerHook: 'onLeave'
	    }
	});

	// Create scene
	$("section").each(function() {
	  
		new ScrollMagic.Scene({
			triggerElement: this,
			duration: '50%'
		})
		.setPin(this)
		.addTo(ctrl);
	 
	});

	// iPhone intro animation Tween
	/*
	var iphoneIntro = TweenMax.from($iphone, 1, {
		yPercent: 50,
		xPercent: 100,
		ease: Cubic.easeOut
	});
  */

	// iPhone intro animation Timeline
	var iphoneIntroTl = new TimelineMax();
	iphoneIntroTl
		.from($iphone, 1, {yPercent: 50,xPercent: 100, ease: Power4.easeInOut})
		.to($innerS1, 0.5, {opacity: 0, yPercent: -5, scale: 0.98}, '0');

	// iPhone back to stylesheet position
	new ScrollMagic.Scene({
		duration: '70%'
	})
	.setTween(iphoneIntroTl)
	.triggerElement($('body')[0])
	.addTo(ctrl);
	
	// Animate the hat up, letter A in and fade in content of section 2
  var iphoneContentHat = new TimelineMax();
  iphoneContentHat		
    .to($screenHat, 1, {yPercent: -50, ease: Power4.easeOut})
    .fromTo($screenA, 1, {yPercent: 20, autoAlpha: 0, scale: 0.8}, {yPercent: 0, autoAlpha: 1, scale: 1, ease: Power4.easeOut}, '0')
    .from($innerS2, 1, {autoAlpha: 0}, '-=0.3');

  new ScrollMagic.Scene({
    offset: wh*0.6,
    triggerElement: $('body')[0],
    duration: '80%'
  })
  .setTween(iphoneContentHat)
  .addIndicators()
  .addTo(ctrl);

	// Animate letter A out, letter B in and fade in content of section 3
  var iphoneContent1Tl = new TimelineMax();
  iphoneContent1Tl		
    .to($screenA, 0.3, {yPercent: -30, autoAlpha: 0, ease: Power4.easeInOut})
    .fromTo($screenB, 1, {yPercent: 20, autoAlpha: 0}, {yPercent: 0, autoAlpha: 1, ease: Power4.easeInOut})
    .from($innerS3, 1, {autoAlpha: 0}, '-=0.7');

  new ScrollMagic.Scene({
    triggerElement: $('.innerS2 h2')[0],
    duration: '50%'
  })
  .setTween(iphoneContent1Tl)
  .addTo(ctrl);

	// Animate letter B out, letter C in and fade in content of section 4
  var iphoneContent2Tl = new TimelineMax();
  iphoneContent2Tl		
    .to($screenB, 0.3, {yPercent: -30, autoAlpha: 0, ease: Power4.easeInOut})
    .fromTo($screenC, 1, {yPercent: 20, autoAlpha: 0}, {yPercent: 0, autoAlpha: 1, ease: Power4.easeInOut})
    .from($innerS4, 1, {autoAlpha: 0}, '-=0.7');

  new ScrollMagic.Scene({
    triggerElement: $('.innerS3 h2')[0],
    duration: '50%'
  })
  .setTween(iphoneContent2Tl)
  .addTo(ctrl);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js"></script>

simple-scrollmagic-tutorial.markdown

Simple ScrollMagic Tutorial

Learn how to use ScrollMagic and GreenSock TweenMax and TimelineMax to build a simple story telling website from scratch.

Read the whole step by step tutorial: https://ihatetomatoes.net/simple-scrollmagic-tutorial/

A Pen by Petr Tichy on CodePen.

License.

style.css

body {
  font: 16px/1.5 'Open Sans', Helvetica, Helvetica Neue, Arial, sans-serif;
  color: rgba(0, 0, 0, 0.9);
}
 
html, body {
  height: 100%;
  margin: 0;
}
 
h1 {
  padding: 20% 0 0 0;
  margin: 0;
  text-align: center;
  font-size: 36px;
  color: rgba(0, 0, 0, 0.9);
  position: relative;
}
h1:before {
  content: '❤';
  display: block;
  position: absolute;
  bottom: 50px;
  left: 50%;
  text-align: center;
  width: 100px;
  margin-left: -50px;
  color: #ff466a;
  font-size: 30px;
}
 
p {
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
}
 
strong {
  color: rgba(0, 0, 0, 0.9);
}
section {
  height: 100%;
  position: relative;
  text-align: center;
}
 
/* Center aligned first section */
section .inner {
  margin: 0 auto;
  max-width: 85%;
}
 
/* Content of the following sections aligned next to the iphone */
section .innerText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-100px, -50%);
  text-align: left;
}
 
/* iPhone/Card positioned to the left - this is a default position */
.iphone {
  width: 290px;
  height: 600px;
  border-radius: 10px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-150%, -50%);
  background-color: #3757D0;
  background-image: -webkit-radial-gradient(#81bcff, #5d7fce);
  background-image: radial-gradient(#81bcff, #5d7fce);
}
 
/* Centered content of the ScrollMagic card */
.iphone p {
  font-size: 140px;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.9);
}
 
/* Letters hidden by default */
.iphone p.screenA, .iphone p.screenB, .iphone p.screenC {
  opacity: 0;
  visibility: hidden;
}
 
/* ScrollMagic hat on top of letters */
.iphone p.screenHat {
  z-index: 2;
}
.iphone p.screenHat img {
  max-width: 130px;
}
 
/* Bullet list */
.features {
  list-style: none;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.6);
}
.features li {
  position: relative;
  padding-left: 17px;
}
 
/* A heart instead of a bullet */
.features li:before {
  content: '❤';
  font-size: 11px;
  position: absolute;
  left: 0;
  top: 5px;
  display: block;
  color: #ff466a;
}