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>
<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) {
	
	/*
		LINKS		
			SCROLLMAGIC
			http://scrollmagic.io
			https://github.com/janpaepke/ScrollMagic/tree/development#availability
			http://scrollmagic.io/examples/basic/simple_tweening.html
		
			GSAP
			https://greensock.com/docs/#/HTML5/GSAP/TweenLite/
			https://ihatetomatoes.net/simple-greensock-tutorial-your-first-steps-with-gsap/
		
	*/
	
	/////////////////////////////////
	// 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 //
	/////////////////////////////
	
	// Add multiple scenes to controller in one go
	SMController.addScene([
		
		// Animate first thought-bubble in at 50px scroll
		new ScrollMagic.Scene({
			offset: 50
		})
		.setTween(
			TweenLite.from("#thought1", 0.5, {left: 800, opacity: 0, ease:Power4.easeInOut})
		)
		.addIndicators(),
		
		// Animate first thought-bubble out at 500px scroll
		new ScrollMagic.Scene({
			offset: 4000
		})
		.setTween(
			TweenLite.to("#thought1", 0.5, {left: 400, opacity: 0, ease:Power4.easeInOut})
		)
		.addIndicators()
	])
	
});