RPeraltaJr
3/28/2017 - 1:57 PM

Scroll Magic Animation

Scroll Magic Animation

section.welcome { 
 .item {
   position: relative;
   transition: all 1s ease;
   right: -45%; // make element go off the screen to the right
 } 
}

.slideInFromRight {
  right: 0%;
}
  
var controllerTwo = new ScrollMagic.Controller({globalSceneOptions: {duration: 950, offset: 100}});
new ScrollMagic.Scene({triggerElement: "section.triggers-the-animation"}) // build scene
	.setClassToggle("section.welcome .item", "slideInFromRight") // add class toggle
	// .addIndicators() // add indicators (requires plugin)
  .addTo(controllerTwo);
<!-- Scroll Magic -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js'></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>