joshrod/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,700" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css" />
    <title>Freetail Animation</title>
  </head>
  <body>
    <section class="beer">
      <div id="trigger"></div>
      <div id="beer1">
        <div class="img-container">
          <img
            src="img/Freetail_Helles_HighRes.svg"
            alt="Freetail Bat Out of Helles"
          />
        </div>
        <div class="wht-left">
          <div class="text">
            <h1>Bat Outta Helles</h1>
            <p>Ok, so I think I tried this beer and it was rather enjoyable. Nothing to write home about, I'd much rather this over a Bud Light any day. Actually...I don't really remember what it tastes like. But Bud Light sucks, so this has to be better right?</p>
          </div>
        </div>
        <div class="color-rt">
          </div>
        </div>
      </div>
      <div id="beer2">
        <div class="img-container">
          <img
            src="img/Freetail_RyeWit_HighRes.svg"
            alt="Freetail Bat Out of Helles"
          />
        </div>
        <div class="wht-left">
            <div class="text">
              <h1>Rye Wit</h1>
              <p>Your wit will become "rye" if you drink this beer. There's a Double Rye Wit beer, and I would think more of you if you drank that one instead. That one has at least 7.5% ABV, and why drink if you're not trying to get anywhere?</p>
            </div>
          </div>
          <div class="color-rt">
          </div>
        </div>
      </div>
    </section>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.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/gsap/2.0.2/TweenMax.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

## main.css
*,
*:before,
*:after {
  box-sizing: border-box;
}

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

body {
  position: relative;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

h1 {
  margin: 0;
  font-family: "Crimson Text", serif;
}

p {
  margin: 0;
  font-family: "Crimson Text", serif;
}

.beer {
  width: 100%;
  height: 200%;
}

#beer1,
#beer2 {
  width: 100%;
  height: 100%;
  position: fixed;
}

#beer1 {
  z-index: 5;
}

#beer2 {
  z-index: 4;
}

.img-container {
  width: 100%;
  max-width: 20rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  z-index: 3;
}

.wht-left {
  width: 50%;
  height: 100%;
  position: absolute;
  left: 0;
  background-color: white;
  z-index: 1;
}

.color-rt {
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  z-index: 1;
}

.wht-left .text {
  max-width: 450px;
  position: relative;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
}

.wht-left .text h1 {
  font-size: 2.8rem;
  margin-bottom: 80px;
}

.wht-left .text p {
  font-size: 1.4rem;
}

#beer1 .color-rt {
  background-color: #c28f1d;
}

#beer2 .color-rt {
  background-color: #7a9cb0;
}

## main.js
let controller = new ScrollMagic.Controller();

window.onload = () => {
  let tween = new TimelineMax();
  tween.add(TweenMax.to("#beer1", 1, { opacity: 0 }), "first");
  tween.add(TweenMax.to(".beer1-bg", 1, { opacity: 0 }), "first");

  let scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    triggerHook: "onLeave",
    duration: "100%"
  })
    .setTween(tween)
    .addIndicators({ name: "tween" })
    .addTo(controller);
};
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,700" rel="stylesheet">
	<link rel="stylesheet" href="css/main.css" />
	<title>Freetail Animation</title>
	</head>
	<body>
	<section class="beer">
	<div id="trigger"></div>
	<div id="beer1">
	<div class="img-container">
	<img
	src="img/Freetail_Helles_HighRes.svg"
	alt="Freetail Bat Out of Helles"
	/>
	</div>
	<div class="wht-left">
	<div class="text">
	<h1>Bat Outta Helles</h1>
	<p>Ok, so I think I tried this beer and it was rather enjoyable. Nothing to write home about, I'd much rather this over a Bud Light any day. Actually...I don't really remember what it tastes like. But Bud Light sucks, so this has to be better right?</p>
	</div>
	</div>
	<div class="color-rt">
	</div>
	</div>
	</div>
	<div id="beer2">
	<div class="img-container">
	<img
	src="img/Freetail_RyeWit_HighRes.svg"
	alt="Freetail Bat Out of Helles"
	/>
	</div>
	<div class="wht-left">
	<div class="text">
	<h1>Rye Wit</h1>
	<p>Your wit will become "rye" if you drink this beer. There's a Double Rye Wit beer, and I would think more of you if you drank that one instead. That one has at least 7.5% ABV, and why drink if you're not trying to get anywhere?</p>
	</div>
	</div>
	<div class="color-rt">
	</div>
	</div>
	</div>
	</section>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.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/gsap/2.0.2/TweenMax.min.js"></script>
	<script src="js/main.js"></script>
	</body>
	</html>
	*,
	*:before,
	*:after {
	box-sizing: border-box;
	}

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

	body {
	position: relative;
	}

	img {
	width: 100%;
	height: auto;
	display: block;
	}

	h1 {
	margin: 0;
	font-family: "Crimson Text", serif;
	}

	p {
	margin: 0;
	font-family: "Crimson Text", serif;
	}

	.beer {
	width: 100%;
	height: 200%;
	}

	#beer1,
	#beer2 {
	width: 100%;
	height: 100%;
	position: fixed;
	}

	#beer1 {
	z-index: 5;
	}

	#beer2 {
	z-index: 4;
	}

	.img-container {
	width: 100%;
	max-width: 20rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 1;
	z-index: 3;
	}

	.wht-left {
	width: 50%;
	height: 100%;
	position: absolute;
	left: 0;
	background-color: white;
	z-index: 1;
	}

	.color-rt {
	width: 50%;
	height: 100%;
	position: absolute;
	right: 0;
	z-index: 1;
	}

	.wht-left .text {
	max-width: 450px;
	position: relative;
	top: 50%;
	left: 10%;
	transform: translateY(-50%);
	}

	.wht-left .text h1 {
	font-size: 2.8rem;
	margin-bottom: 80px;
	}

	.wht-left .text p {
	font-size: 1.4rem;
	}

	#beer1 .color-rt {
	background-color: #c28f1d;
	}

	#beer2 .color-rt {
	background-color: #7a9cb0;
	}
	let controller = new ScrollMagic.Controller();

	window.onload = () => {
	let tween = new TimelineMax();
	tween.add(TweenMax.to("#beer1", 1, { opacity: 0 }), "first");
	tween.add(TweenMax.to(".beer1-bg", 1, { opacity: 0 }), "first");

	let scene = new ScrollMagic.Scene({
	triggerElement: "#trigger",
	triggerHook: "onLeave",
	duration: "100%"
	})
	.setTween(tween)
	.addIndicators({ name: "tween" })
	.addTo(controller);
	};