<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">
</header>

<main class="full-screen" role="main">
  <section class="full-screen blue">
    <div>
      <h1>Fade In Fade out</h1>
    </div>
  </section>

  <section id="fadein-trigger" class="red">
    <div>
      <h1>Fadein Trigger</h1>
      <p>This text will fade in and fade out as you scroll…yo!</p>
    </div>
  </section>
  
  <section class="full-screen blue" id="fadeout-trigger">
    <div>
      <h1>Fadeout Trigger</h1>
    </div>
  </section>
</main>
/*
	Demo Styles: NOT REQUIRED
*/
html,
body {
  margin: 0;
  height: 100%
}

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

header {
  position: fixed;
  top: 10px;
  left: 10px;
}

section,
section > div {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #EFEFEF;
}

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

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

// Fadein/Fadeout Element
#fadein-trigger > div {
  height: 400px;
  opacity: 0; // hide init
}
View Compiled
var fadein_tween = TweenMax.to('#fadein-trigger > div', .375,{ opacity: 1 });
var fadeout_tween = TweenMax.to('#fadein-trigger > div', .375,{ opacity: 0 });

var controller = new ScrollMagic.Controller();

var fadein_scene = new ScrollMagic.Scene({
  triggerElement: '#fadein-trigger',
  reverse: true
})
.setTween(fadein_tween)
.addTo(controller);

var fadeout_scene = new ScrollMagic.Scene({
  triggerElement: '#fadeout-trigger',
  reverse: true
})
.setTween(fadeout_tween)
.addTo(controller);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.1/ScrollMagic.js
  4. https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.1/plugins/animation.gsap.js
  5. https://codepen.io/grayghostvisuals/pen/a08e0d79c150ff5030f9b6afaa137749