Cant figure out simple background image vertical parallax...

[drnen101]

I've looked at the samples.. this seems like it should be simple. I've used the plugin to animate other objects on the screen but simple bg parallax is eluding me. The masthead i want to parallax sits at the very top of the page:

<div class="masthead">
<div class="projecthead1"></div> // this contains the parallax background
</div>

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

// build scenes
new ScrollMagic.Scene({triggerElement: ".masthead"})
                .setTween(".projecthead1", {y: "20%", ease: Linear.easeNone})
                .addIndicators()
                .addTo(controller);
    });

What am i missing?

[janpaepke]

What exactly isn't working? And can you create a jsfiddle of it?

[drnen101]

this fiddle doesnt appear to do much of anything.. I must not have loaded my libraries correctly.. but when i preview it in my own code right now, the animation starts immediately on page load rather than being tied to scrolling.

https://jsfiddle.net/fp9r4dhw/

[krnlde]

Uncaught ReferenceError: TimelineMax is not defined You forgot to include the important parts like gsap itself, the SM-gsap plugin and the addIndicators plugin.

ftfy: https://jsfiddle.net/fp9r4dhw/3/

@janpaepke those plugins don't seem to be available on cloudflare? I temporarily linked them from http://janpaepke.github.io/ScrollMagic

[drnen101]

I grabbed those files and hosted locally. That fiddle was a great help thanks! It's finally starting to make a little sense to me now.

[janpaepke]

@krnlde they are, but for the sake of brevity I collapsed the folders there to have both minified and unminified versions in the root folder. Also please don't use minified versions for fiddles, because often the logging of error msgs is helpful here.

The correct link is: http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.0/plugins/animation.gsap.js

I updated your fiddle accordingly.

@drnen101 Does this mean your issue is resolved?

[krnlde]

Glad I could help. And thanks for clarification Jan :)

[drnen101]

yes resolved thanks for the help all of you!