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>