scroll magic demo

quick demo for scroll magic with gsap timeline

by survivant

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<div class="wrap">
  <p>Start scrolling &#58;&#41;</p>
  
  <div class="aniWrap">
    <h1>Animation&#8230;</h1>
    <p>is cool&#33;</p>
  </div>
</div>

<div id="aniTrigger"></div>

CSS

body {
  max-width: 100%;
  min-height: 1000px;
  position: relative;
}

.wrap {
  width: 80%;
  text-align: center;
  padding: 0 1.875em;
  margin: 0 10%;
}

h1, p {
  font-family: sans-serif;
}

p {
  font-size: 1.0em;
  font-weight: regular;
  color: #222;
}

.aniWrap {
  width: 30%;
  background: #2d3f9b;
  text-align: center;
  border-radius: 5px;
  padding: 1.250em 0.625em;
  margin: 300px auto 0;
}

h1, .aniWrap p {
  color: #eee;
}

h1 {
  font-size: 1.125em;
  font-weight: bold;
}

.aniWrap p {
  opacity: 0;
}

#aniTrigger {
  position: absolute;
  top: 40%;
  right: 0;
}

JavaScript

function aniScroll() {
	
	var controller = new ScrollMagic.Controller(),
  		aniBox = $(".aniWrap"),
  		aniTitle = $(".aniWrap h1"),
      aniText = $(".aniWrap p");
      
  // create timeline
  var aniSequence = new TimelineMax();
  		aniSequence
      	.to(aniBox, 0.2, {background: "#ad2929", ease: Power3.easeInOut})
        .to(aniTitle, 0.2, {fontSize: "1.750em", ease: Power3.easeInOut})
        .to(aniText, 0.3, {opacity: "1.0", ease: Power3.easeInOut});
      
	// build scene
	var scene = new ScrollMagic.Scene({
			triggerElement: "#aniTrigger"
		})
    .setTween(aniSequence)
  	.addTo(controller);
}

function init() {
	aniScroll();
}

init();