How to add parallax effect using GSAP and ScrollMagic

Introduction

Parallax : Parallax effect means change or displacement in the apparent position of the object along two different lines of sight.
GSAP : GSAP is a JavaScript library for building high-performance animations that work in every major browser. GSAP is a high-speed property manipulator, updating values over time with extreme accuracy.
ScrollMagic : The javascript library for magical scroll interactions. ScrollMagic helps you to easily react to the user’s current scroll position.

Steps to add the Parallax effect :

Step 1 : Add Library

<script type="text/javascript" src="assets/js/gsap.min.js"></script>
<script type="text/javascript" src="assets/js/TweenMax.min.js"></script>
<script type="text/javascript" src="assets/js/ScrollMagic.min.js"></script>
<script type="text/javascript" src="assets/js/animation.gsap.js"></script>

Step 2 : Add script

var controller = new ScrollMagic.Controller();
$("section").each(function() {
var tl = new TimelineMax();
var child = $(this).find("canvas");
tl.to(child, 1, { y: -100, ease: Linear.easeNone });
var scene = new ScrollMagic.Scene({
triggerElement: this,
triggerHook: 0.3,
duration: "100%"
})
.setTween(tl)
.addTo(controller);
});

IN Line number 2 replace the section by your class or ID of the outer HTML element and at line number 4 replace the canvas by your class or ID of the inner HTML element. How to add parallax effect using GSAP and ScrollMagic

Example:
<div class=”section”>
<div class=”canvas”>
</div>
</div>
Here the inner div with canvas class changes its position with respect to the outer div with class section.

Line 5 : to method

.to( target:Object, duration:Number, vars:Object, position:* )

target: Object
Target object is whose position is going to change

Duration: Number
Duration in seconds (or frames if the timeline is frames-based)

Position: It is change in position

           y: -100 It means object move upward by 100px

Example:
tl.to(element, 1, {x:100});
tl.to(element, 1, {y:50});

You can see our demo of parallax effect using GSAP and  ScrollMagic