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.

Lambda School Pt. 1: Consumers

Introduction: Here begins the series of posts analyzing Lambda School, as outlined in my last post. By way of introduction, Lambda School is a Y-Combinator-backed startup that aims to upskill untapped talent to participate in the tech industry. They’ve raised ~$4M and are currently offering intensive courses on computer science, data science, iOS development, Android…

A Taste of Things to Come…

For my next few blog posts, I want to try something new: writing a series. I’m imagining probably 4 somewhat interconnected posts in the service of telling a bigger story or making more nuanced points than I usually do. I feel that since my return to the blog, I’ve been missing some of the deeper…

Post #100: The Genre of Progress Literature

This is post #100 on Thought Distiller! I’m personally surprised; I had no idea the blog was so far along in terms of post count. Anyway, thanks for being a reader! Here’s a post that, by the end, I hope will lift your spirits. What’s wrong with the news? It often feels as if we’re…

Conflating Poverty Alleviation with Income Inequality Reduction

I’ve often found that writers— even those trained in economics— conflate alleviating poverty with trying to make the societal income distribution more equal. The most recent example of this that I’ve encountered was within Rutger Bregman’s acclaimed book Utopia for Realists. I enjoyed the majority of the book, which advocated a universal basic income (UBI), a…

The Business of “Fake” Reality

More and more, it seems like the word “fake” is cropping up in our public discourse. Whether that refers to Trump’s favorite phrase “fake news” or uncanny and disturbing “deepfakes,” fakeness is rapidly pervading various forms of multimedia. In the past, people could certainly have created work anonymously, pseudonymously, or even forge work under someone else’s…

And We’re Back!

It’s been quite a long time (7 months!) since I last posted to Thought Distiller. My hiatus occurred due to a confluence of factors that prevented me from devoting the time and attention that I would have liked to this blog. And I realized that I would rather write nothing at all than to write…

Thinking about Apps Inside of VR

In late November of last year, I tweeted a bite-sized view of what I think the future of VR (I’ll use the term VR as inclusive of AR) will look like: The point of this post is to expand a bit more on why I believe this to be true and what needs to happen…

Six Links: Pirates, Moats, Capitalism

Hopefully this edition of Six Links will help you find yet more intriguing content to help you finish January strong. Here goes: The Hijacking of the Brillante Virtuouso by Kit Chellel & Matthew Campbell: Anytime a commercial vessel is lost, the incident is recorded with a quill pen in a leatherbound book at Lloyd’s, a London…

10 Predictions for 2018

I saw a number of prediction posts for the upcoming year as I was surfing the web today, and I figured I’d write my own. So without further ado, here are ten predictions for this year: Donald Trump will still be president at the end of 2018 (confidence level: 8/10) The cryptocurrency space will attract…