How to use ScrollMagic (Technical Post)

Getting Started

Since I just wrapped up my first project week (read: exam week) at Lambda School, I’m going to try my hand at writing a technical post on how to use a certain library in JavaScript. I know it’s not something my typical audience would read and I don’t expect technical writing like this to become a regular thing on this blog. Rest assured, I’ll return to social science / business / miscellany in my next post.

To the matter at hand, the project I completed was about coding up a fictitious architecture firm’s website based on given specifications. You can check out my final result here. What you might notice is that the certain elements of the page animate to become visible as you scroll down.

This GIF is not the smoothest depiction of the animations, but you get the point.

Trying to accomplish that sort of effect on your own, without reliance on other people’s code, is a pretty daunting task. For that reason, I turned to something called ScrollMagic.

ScrollMagic is Javascript library developed by Jan Paepke. A library, simply put, is pre-written code that we can use within our own code without reinventing the wheel. Per comparative advantage in Econ 101, focusing on outputting what we’re good at makes everyone better. It so happens that Jan Paepke is really good at getting the browser to behave a certain way as the user scrolls, so I decided to use his code. To get started with it, I followed along with this tutorial from Scotch.io.

Normally, using a library is pretty easy. You just add a <script> tag to your HTML. So in my case, based on the Scotch tutorial, it should have been this:

<script src="jquery.scrollmagic.min.js"></script>

But there’s an obvious problem: the Scotch folks assume you want to download the library and include it in your project folder. You can tell because the “src” is not a link (i.e. no “www.example.com”). But I didn’t want the hassle of downloading the library; instead, I wanted to call it from somewhere else it was hosted (a content-delivery network or CDN). So I grabbed the latest version from the CloudFlare CDN:

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>

Unfortunately, there are some other issues. ScrollMagic is dependent on some other code libraries. The first is jQuery, which I grabbed from the Scotch tutorial. And the second is GreenSock, which is the library that actually animates the content (ScrollMagic just tells it when, as the user scrolls, to animate).

I used GreenSock to animate instead of using CSS animations because (a) it saved me from having to add a bunch of CSS classes to my code and (b) you can’t bind CSS animations to the scrollbar (they appear and they’re stuck- they won’t reverse the animation if you go up on the scrollbar). Anyway, jQuery and GreenSock look like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<!-- the above is an old version of jquery but I had no trouble with it -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

Even after getting an up-to-date version of ScrollMagic from a CDN and including its dependencies, I still couldn’t get it to work! After a lot of Googling, I found this answer: I had forgotten to include the GreenSock plugin for ScrollMagic.  I made that mistake because it wasn’t mentioned prominently in any of the ScrollMagic documentation or example code. But I eventually found and included the plugin too. So all together, your HTML code should look like this:

<head> 
... <!-- indicating that you might put other stuff here -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="//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>

</head> <!-- you could try putting the scripts at the end of your body, it just didn't work for me -->

I put all the scripts in the <head> because JQuery freaked out at me when I put them at the end of the <body>. In any case, with the above included in my code, my animations started to work.

Using ScrollMagic

So now that we have the actual code to make ScrollMagic work, how do we use it? It’s pretty simple.

First, you’ll want to set up your animations using GreenSock. I’m showing two examples below. Basically, GreenSock’s TweenMax can be used “from” or “to,” meaning that it can animate from the given parameters to the CSS styling or that is can animate to the given parameters from the CSS styling.

In this case, I’m telling it to animate my example element (let’s say it’s some website text) from having opacity 0 (being invisible) and being displaced leftward by 200 pixels. This will cause the element to simultaneously fade-in and fly-in from the left over the course of 1 second:

let tween = TweenMax.from('#exampleElement', 1, {autoAlpha:0, x:-200, ease: Circ.easeOut,});

Then you should create your ScrollMagic controller. Simply put, this will govern the overarching logic of however many animations you choose to create:

let controller = new ScrollMagic.Controller();

The next thing to do is create a Scene, which is how you let ScrollMagic know where you want something to happen. In the following scene, I’m telling ScrollMagic to start my animation (“tween”) after the user scrolls 10 pixels past the trigger element #exampleH1 (a header): 

let scene = new ScrollMagic.Scene({
   triggerElement: '#exampleH1',
   offset: 10,
}).setTween(tween);

Finally, you add the scene to the controller so it can govern the logic of your scene and make sure things actually happen:

controller.addScene([
   scene, // you can add more scenes after the comma
]);

Ultimately, your index.js file will look something like the following and your animations should work! (Just remember to include the <script> tags for index.js at the bottom of your <body>).

let tween = TweenMax.from('#exampleElement', 1, {autoAlpha:0, x:-200, ease: Circ.easeOut,});

let controller = new ScrollMagic.Controller();

let scene = new ScrollMagic.Scene({
   triggerElement: '#exampleH1',
   offset: 10,
}).setTween(tween);

controller.addScene([scene, ]);

Happy Coding! I hope this helps.


Also published on Medium.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.