ScrollMagic Sprite Animation

Animate sprite with scroll-position, using ScrollMagic and GSAP.

by the_voder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/CSSPlugin.min.js"></script>
<div id="thought1" class="bubbles"></div>
<div id="thought2" class="bubbles"></div>
<div id="thought3" class="bubbles"></div>
<div id="thought4" class="bubbles"></div>

<div id="animation"></div>

<div id="ground"></div>

CSS

body {
	height: 10000px;
}

.bubbles {
	position: fixed;
	width: 150px;
	height: 170px;
	left: 50%;
	margin-left: -150px;
	top: 230px;
	background-image: url(http://www.clipartbest.com/cliparts/bTy/r4L/bTyr4L8TL.png);
	background-size: cover;
	opacity: 0.7;
}

#animation {
	position: fixed;
	width: 184px; height: 325px;
    left: 50%;
    margin-left: -92px;
    top: 400px;
	padding: 0;
	background-image: url(https://cdn.codeandweb.com/blog/2014/11/05/animate-sprites-in-css-with-texturepacker/capguy-walk.png);
}

#ground {
	
}

JavaScript

$(document).ready(function(e) {
	
	/////////////////////////////////
	// Init Scrollmagic controller //
	/////////////////////////////////
	
    var SMController = new ScrollMagic.Controller();
	
    //////////////////////////////////
    // Animate first character walk //
    //////////////////////////////////

	// Create Scrollmagic scene and set tween to animate character walk-cycle
	var character1AnimateSC = new ScrollMagic.Scene({
    	offset: 0,		// Start tween at scroll-position 0
		duration: 8000,	// Set scroll-duration to 8000px
	})
	// Create tween
	.setTween(
		TweenMax.to("#animation", 1.0, {
			backgroundPosition: "100% 0",
			ease: SteppedEase.config(7),
			repeat: 2
		})
	)
	// Add scene to controller
	.addTo(SMController);
	
	/////////////////////////////
	// Animate thought-bubbles //
	/////////////////////////////
	
	var scene1BubblesTL = new TimelineLite();
	
	$(".bubbles").each(function(i) {
		scene1BubblesTL.from($(this), 2, {x: "120%", opacity: 0}, "+=2");
		scene1BubblesTL.to($(this), 2, {x: "-100%", opacity: 0}, "+=10");
	});
	
	var scene1BubblesSC = new ScrollMagic.Scene({
		offset: 0,
		duration: 8000
	})
	.setTween(scene1BubblesTL)
	.addTo(SMController);
});