Horizontal animation while vertically scrolling with scroll magic

Question

I want to have a full screen (width/height) panel to animate horizontally (parallax) as the user scrolls vertically. I am trying to use the basic section slides example but can't get it to work. I have a fiddle here. https://jsfiddle.net/69dz7tav/

$(function () { // wait for document ready
		// init
		var controller = new ScrollMagic.Controller();

		// define movement of panels
		var wipeAnimation = new TimelineMax()
			// animate to second panel
			.to("#slideContainer", 0.5, {z: -150})		// move back in 3D space
			.to("#slideContainer", 1,   {x: "-25%"})	// move in to first panel
			.to("#slideContainer", 0.5, {z: 0})				// move back to origin in 3D space
			// animate to third panel
			.to("#slideContainer", 0.5, {z: -150, delay: 1})
			.to("#slideContainer", 1,   {x: "-50%"})
			.to("#slideContainer", 0.5, {z: 0})
			// animate to forth panel
			.to("#slideContainer", 0.5, {z: -150, delay: 1})
			.to("#slideContainer", 1,   {x: "-75%"})
			.to("#slideContainer", 0.5, {z: 0});

		// create scene to pin and link animation
		new ScrollMagic.Scene({
				triggerElement: "#pinContainer",
				triggerHook: 0,
				duration: "500%"
			})
			.setPin("#pinContainer")
			.setTween(wipeAnimation)
			.addTo(controller);
	});

html,body {
  width:100%;
  height:100%;
}
#pinContainer {
		width: 100%;
		height: 100%;
		overflow: hidden;
		-webkit-perspective: 1000;
		        perspective: 1000;
	}
	#slideContainer {
		width: 400%; /* to contain 4 panels, each with 100% of window width */
		height: 100%;
	}
	.panel {
		height: 100%;
		width: 25%; /* relative to parent -> 25% of 400% = 100% of window width */
		float: left;
	}
  .blue {
	background-color: #3883d8;
}
.turqoise {
	background-color: #38ced7;
}
.brown {
	background-color: #a66f28;
}
.bordeaux {
	background-color: #953543;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pinContainer">
	<div id="slideContainer">
		<section class="panel blue">
			<b>ONE</b>
		</section>
		<section class="panel turqoise">
			<b>TWO</b>
		</section>
		<section class="panel green">
			<b>THREE</b>
		</section>
		<section class="panel bordeaux">
			<b>FOUR</b>
		</section>
	</div>
</div>

It is running through the timeline animation immediately instead of on scroll. What am I missing?

Answer 1

Think I figured it out for you. in your jfiddle im getting the errors .setPin and .setTween is not a function. This would be why your code is running right away. There is no start point so it just starts on ready. ensure you include jquery.gsap.js, TweenMax.js, ScrollMagic.js, TweenLite.js, animation.gsap.js, CSSPlugin.js, debug.addIndicators.js. MAKE SURE YOU PUT THEM IN THIS ORDER, that is very important. I do want to thank you, your bit of code helped me finish a project at work, wouldnt have been able to do it without your code! for extra help add .addIndicators() to help you see where your scrollmagic starts and ends!. Hope this helped :)