Create interactive scrolling websites with ScrollMagic.js

ScrollMagic let’s you create awesome scroll based website animations. It is a JavaScript library that helps you easily react to the user’s current scroll position.

In this post, I’ll cover how to get started with the library, using it alongside other animation tools like GSAP, and also performing custom actions with it. You can check out a demo webpage I created using the library here.

Get started with ScrollMagic

Installation

You can easily get started with the library by downloading it or copying and pasting the CDN links in your code:

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

For debugging your app, you should also install the addIndicators plugin:

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>

How to use It

The basic ScrollMagic design, consists of a controller with one or more scenes attached to it. A scene defines what happens when a user scrolls to a certain point in our site. So our setup steps would be:

1. Initialize your controller.

const controller= new ScrollMagic.Controller();

2. Create a scene

The scene can have different options which you can customize based on your needs.

var myScene = new ScrollMagic.Scene({
 duration: 200, // duration of scene in px or responsive duration in %
 offset: 20, // offset trigger position by 20px
 triggerElement: '#container', // element that triggers scene
 triggerHook: 0.5, // 0=top, 0.5=middle, 1=bottom or 'onEnter','onCenter','onLeave',
 reverse: true/false, //whether to play scene in reverse on the way up
});

3. Add your scene to the controller.

var myScene = new ScrollMagic.Scene({ 
 duration: 200
})
.addTo(controller) // This adds your scene to the controller

4. Optional: If you have the addIndicators plugin installed like we did in the installation section, you can add it to the scene like this:

var myScene = new ScrollMagic.Scene({ 
 duration: 200 
})
.addIndicators() // This helps you debug
.addTo(controller)

Basic Example

ScrollMagic lets you easily add or remove a class from an element as shown above. Here we add a show class to our green-rectangle div when its scrolled to, which changes it's opacity.

Using ScrollMagic with GSAP

We can create powerful animations on scroll by using the GreenSock Animation Platform (GSAP) with ScrollMagic. This is a powerful JavaScript library for building high-performance animations.

Setup

You’ll need to start by installing GSAP. You can use the CDN links below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script>

To let ScrollMagic take control of your GSAP animations, you’ll need the GSAP plugin.

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>

Example

Here, we create our timeline tween with GSAP and then pass it to the scene with .setTween(). The animation starts when our trigger hits the top of the container div.

Custom Actions in ScrollMagic

With ScrollMagic, you can also easily trigger callback functions based on different events in the scene. This takes the form of scene.on(options, callback) ,the value of options can take of any of the following values, “change update progress start end enter leave” depending on the event the callback is being fired at.

Helpful Resources

You can find the code for the demo webpage here. You can also check out http://scrollmagic.io/examples/ for more examples.