Understanding ScrollMagic

Question

I'm trying to figure out how this ScrollMagic Demo works. Here is the code they I am using from the demo:

var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});

// build scenes
new ScrollMagic.Scene({triggerElement: "#home"})
    .setTween("#home > div", {y: "100%", ease: Linear.easeNone})
    .addIndicators()
    .addTo(controller);


new ScrollMagic.Scene({triggerElement: "#work"})
    .setTween("#work", {y: "-80%", ease: Linear.easeNone})
    .addIndicators()
    .addTo(controller);

new ScrollMagic.Scene({triggerElement: "#about"})
    .setTween("#about > div", {y: "200%", ease: Linear.easeNone})
    .addIndicators()
    .addTo(controller);

I was under the impression the ScrollMagic was using GSAP, but I am not very familiar with this .setTween() method of ScrollMagic.

Here are some of the things I am not fully able to understand:

duration: Currently, it is set to 200%. Is this the duration the animation will take to complete in terms of scrolling the page?
.setTween(): The first parameter is an html selector but when I use a class it seems to break it. The 2nd parameter is the y position. But is this parameter used to offset the content on load i.e. is the #work section is set to offset by -80% on load?

I have tried to look at the documentation to figure this stuff out but they seem to be using a different method here. I am just looking for a simple parallax effect.

**[`.setTween()`](http://janpaepke.github.io/ScrollMagic/docs/animation.GSAP.html#Scene.setTween)** is a shorthand to **[`TweenMax.to()`](http://greensock.com/docs/#/HTML5/GSAP/TweenMax/to)** for a `1` second tween. For this to work, you must have **[`animation.gsap.js`](http://janpaepke.github.io/ScrollMagic/docs/animation.GSAP.html)** plugin imported as well as of course the **[`TweenLite`](http://greensock.com/tweenlite)** (or based on your preference **[`TweenMax`](http://greensock.com/tweenmax)**) library itself. — Tahir Ahmed, Aug 08 '15 at 12:25
I highly recommend Petr Tichy's **[posts](https://ihatetomatoes.net/?s=scrollmagic&post_type=post)** on the subject specially the **[Simple ScrollMagic Tutorial](https://ihatetomatoes.net/simple-scrollmagic-tutorial/)** if you haven't seen it already. — Tahir Ahmed, Aug 08 '15 at 12:33

Understanding ScrollMagic

0 Answers0