Scroll-Magic Test

Test of Scroll-Magic jQuery plugin.

by the_voder

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.debug.js"></script>
<div class="scrollContent">
	<section id="titlechart">
		<div id="description">
			<h1>Simple Tweening</h1>
			<h2>Two examples of basic tweening.</h2>
			<ol>
				<li>When no duration is defined for the scene, the tween will simply start playing when the scroll reaches the trigger position.</li>
				<li>If the scene has a duration the progress of the tween will directly correspond to the scroll position.</li>
			</ol>
			<a href="#" class="viewsource">view source</a>
		</div>
		<script>
			var controller;
			$(document).ready(function($) {
				// init controller
				controller = new ScrollMagic();
			});
		</script>
	</section>
	<section class="demo">
		<div class="spacer s2"></div>
		<div id="trigger1" class="spacer s0"></div>
		<div id="animate1" class="box2 skin">
			<p>You wouldn't like me, when I'm angry!</p>
			<a href="#" class="viewsource">view source</a>
		</div>
		<div class="spacer s2"></div>
		<script>
			$(document).ready(function($) {
				// build tween
				var tween = TweenMax.to("#animate1", 0.5, {backgroundColor: "green", scale: 2.5});

				// build scene
				var scene = new ScrollScene({triggerElement: "#trigger1"})
								.setTween(tween)
								.addTo(controller);

				// show indicators (requires debug extension)
				scene.addIndicators();
			});
		</script>
	</section>
	<div class="spacer s_viewport"></div>
</div>

CSS

#moveme-01 {
    width: 200px;
    padding: 20px;
    background-color: #eee;
}

JavaScript

$(document).ready(function($) {
    // build tween
    var tween = TweenMax.fromTo("#animate2", 0.5,
        {"border-top": "0px solid white"},
        {"border-top": "30px solid white", backgroundColor: "blue", scale: 0.7}
    );

	// build scene
	var scene = new ScrollScene({triggerElement: "#trigger2", duration: 300})
        .setTween(tween)
        .addTo(controller);

	// show indicators (requires debug extension)
	scene.addIndicators();
});