Recent posts

ScrollMagic Mastery #1 : Setup

First of all, congratulations on taking the first step toward ScrollMagic Mastery. Whether you’re a JavaScript beginner or a competent frontend designer hoping to create more delighting website, in this series you’ll learn everything you need to know to create stunning pages that move any way you want them to.

Before we jump right in and start moving things around though, we need to create our first page and load ScrollMagic’s dependencies. Ready ? Awesome !

Minimum HTML5 Page

First things first, and because we’re going to create sweet sweet web pages, we need to create our first HTML page, here’s the code for the bare minimum valid HTML5 page :

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <title>ScrollMagic #1 Setup</title>
</head>

<body>
 This is my page
</body>

</html>

This should make sense, nothing special is going on. If something doesn’t make sense to you, you probably need to learn or refresh your memory on HTML Basics before moving forward.

Loading the dependencies

Now that we have our structure, it’s time to load ScrollMagic and its dependencies. For now, to get started faster, we’re going to load them all from CDNs an GitHub.

Note : Later on we’ll cover how to merge and minify everything, but for now let’s keep things simple and quick so we can start moving things around soon !

Loading jQuery

Everybody knows jQuery, it’s the most used JavaScript library on the Internet ! We’ll load it from Google’s CDN in our <head> tag :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>ScrollMagic #1 Setup</title>
 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
 This is my page
</body>
</html>

Perfect, that was easy. Let’s move on to GSAP !

Loading GSAP

If you’ve never heard of it, GSAP stands for GreenSock Animation Platform. It’s one of the most flexible and powerful JavaScript animation library. It’s really fast, flexible and built by animators for animators.

During this tutorial, we’ll cover the basics of GSAP, a more complete tutorial specifically on GSAP is in the making though, so you’ll discover the details and powerful techniques you’ll be able to use in conjonction with ScrollMagic.

Anyway, let’s add this to our <head> :

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>

Good !

Loading ScrollMagic

There we are, time to finally load ScrollMagic !

<script src="http://rawgit.com/janpaepke/ScrollMagic/master/scrollmagic/uncompressed/ScrollMagic.js"></script>
<script src="http://rawgit.com/janpaepke/ScrollMagic/master/scrollmagic/uncompressed/plugins/animation.gsap.js"></script>
<script src="http://rawgit.com/janpaepke/ScrollMagic/master/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>

For this one, we’re pulling the files directly from ScrollMagic’s GitHub repository, through rawgit.com a service that adds the proper MIME Types to files on GitHub. We’re also loading animation.gsap.js which is the bridge between ScrollMagic (which handles the scrolling) and GSAP, which deals with the animations and debug.addIndicators.js, which will be really useful when we start animating things to get visual cues of what is going on. You’ll get it in the next tutorial !

Final Code

There we are, we haven’t done anything yet but prepare our very first page, making it ready to get animated with ScrollMagic and GSAP ! Here’s what the final code looks like :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>ScrollMagic #1 Setup</title>
 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
 <script src="http://rawgit.com/janpaepke/ScrollMagic/master/scrollmagic/uncompressed/ScrollMagic.js"></script>
 <script src="http://rawgit.com/janpaepke/ScrollMagic/master/scrollmagic/uncompressed/plugins/animation.gsap.js"></script>
 <script src="http://rawgit.com/janpaepke/ScrollMagic/master/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>
</head>

<body>
 This is my page
</body>

</html>

I hope you have the same code right now. If so that’s perfect, we can move on to the next lesson during which we’ll create our first Tween. No idea what it means ? That’s even better, you’ll be surprised !

Recent Inspiration

Capture d’écran 2015-02-23 à 11.23.09 Capture d’écran 2015-02-23 à 11.05.31 Capture d’écran 2015-02-23 à 11.00.25 Capture d’écran 2015-02-23 à 10.56.43 Capture d’écran 2015-02-20 à 10.15.24 Capture d’écran 2015-02-20 à 10.09.15 Capture d’écran 2015-02-20 à 10.05.19 Capture d’écran 2015-02-18 à 16.44.30 Capture d’écran 2015-02-18 à 16.29.30 Capture d’écran 2015-02-18 à 16.27.14 More Inspiration

Recent Articles

[VIDEO] Designing with Animation

Invisible animation

FLIP your Animations

Using Motion For User Experience On Apps And Websites

Google Material Animation – Authentic Motion

How to create a nice CSS3 Preloader

Adding Delight to Your Design with CSS3 and Webkit Keyframe Animation

Introduction to CSS3 Keyframe Animations

All you need to know about CSS Transitions

Five Ways to Animate Responsibly