ScrollMagic for Beginners Tutorial

Alicia Ramirez

7 years ago

ScrollMagic is a JavaScript library for creating scroll interactions. It lets you create animations that start and stop at specific points during the scrolling of a page. It’s quite powerful, but can be intimidating for beginners, since unlike Skrollr, it’s all done in JavaScript.

In this tutorial, I’ll cover the basics of adding ScrollMagic to a page and creating basic animations. I will also introduce more advanced animations with the help of GSAP.

We will animate 3 different “slides”. The first one will have a parallax background (GSAP), the second and third will scroll with a “pin” effect (ScrollMagic only), and the third will also demonstrate three simple animations: fly in from the left, fade in, and fly in from the bottom (GSAP).

End result. See the demo

Step 1 – HTML and CSS setup

In your HTML, you will need the following elements:

<div class="parallax slide" id="parallax">
    <div class="row">
        <h1>Parallax background</h1>
    </div>
</div>

<div class="slidein slide" id="slidein">
    <div class="row">
        <h1>Slide and pin</h1>
    </div>
</div>

<div class="slidein2 slide" id="slidein2">
    <div class="row">
        <div id="left">
            <h1>From left</h1>
        </div>
        <div id="opacity">
            <h1>Fade in</h1>
        </div>
        <div id="bottom">
            <h1>From bottom</h1>
        </div>
    </div>
</div>

<div class="parallax slide" id="parallax">

```
    <div class="row">
```

        <h1>Parallax background</h1>

```
    </div>
```
```
</div>
```
```
 
```

<div class="slidein slide" id="slidein">

```
    <div class="row">
```
```
        <h1>Slide and pin</h1>
```
```
    </div>
```
```
</div>
```
```
 
```

<div class="slidein2 slide" id="slidein2">

```
    <div class="row">
```
```
        <div id="left">
```

            <h1>From left</h1>

```
        </div>
```
```
        <div id="opacity">
```

            <h1>Fade in</h1>

```
        </div>
```
```
        <div id="bottom">
```

            <h1>From bottom</h1>

```
        </div>
```
```
    </div>
```
```
</div>
```

Also, the following CSS (substitute the background image in the parallax section for your own):

body {
    margin: 0;
    font-family: sans-serif;
}

.slide .row {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: white;
    text-align: center;
}

.intro {
    background: #305a5b;
}

.parallax {
    background: url(../images/bg.jpg) 50% 0;
}

.slidein {
    background: #5b3030;
}

.slidein2 {
    background: #304b5b;
}

.slidein2 .row {
    justify-content: space-around;
}

```
body {
```
```
    margin: 0;
```
```
    font-family: sans-serif;
```
```
}
```
```
 
```
```
.slide .row {
```
```
    display: flex;
```
```
    justify-content: center;
```
```
    align-items: center;
```
```
    height: 100vh;
```
```
    color: white;
```
```
    text-align: center;
```
```
}
```
```
 
```
```
.intro {
```
```
    background: #305a5b;
```
```
}
```
```
 
```
```
.parallax {
```

    background: url(../images/bg.jpg) 50% 0;

```
}
```
```
 
```
```
.slidein {
```
```
    background: #5b3030;
```
```
}
```
```
 
```
```
.slidein2 {
```
```
    background: #304b5b;
```
```
}
```
```
 
```
```
.slidein2 .row {
```
```
    justify-content: space-around;
```
```
}
```

Step 2 – Link the scripts

You can download ScrollMagic from their site or simply link to the scripts directly to their CDN. In this tutorial, I will use the CDN for simplicity.

Although not mandatory, there three additional scripts that I will use during the tutorial:

ScrollMagic indicators: this script displays the trigger, start and end point of an animation, which makes debugging much easier. This file is included in the ScrollMagic master download, or you can use the CDN
GSAP‘s TweenMax: GreenSock offers a robust animation library that adds more complex animations to ScrollMagic
ScrollMagic GSAP animation: Also included in the master download (or via CDN), this plugin allows ScrollMagic to work with GSAP.

Remember to also create your own JavaScript file to include your custom code. In my case, it’s called app.js, and it’s in my js folder.

<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/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>

<script src="js/app.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/debug.addIndicators.min.js"></script>

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

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

```
 
```
```
<script src="js/app.js"></script>
```

Step 3 – Create a controller

In your JavaScript file, add the following:

var controller = new ScrollMagic.Controller();

var controller = new ScrollMagic.Controller();

This will create a ScrollMagic controller that will house all of your animations.

Step 4 – Parallax effect

Now that we have a controller, we can start adding animations to it. The first one we’ll do is the parallax animation.

// Parallax background
new ScrollMagic.Scene({
        triggerElement: "#parallax",
        triggerHook: "onEnter",
    })
    .duration('200%')
    .setTween("#parallax", {
        backgroundPosition: "50% 100%",
        ease: Linear.easeNone
    })
    //.addIndicators() // for debugging purposes
    .addTo(controller);

```
// Parallax background
```
```
new ScrollMagic.Scene({
```

        triggerElement: "#parallax",

```
        triggerHook: "onEnter",
```
```
    })
```
```
    .duration('200%')
```
```
    .setTween("#parallax", {
```

        backgroundPosition: "50% 100%",

```
        ease: Linear.easeNone
```
```
    })
```

    //.addIndicators() // for debugging purposes

```
    .addTo(controller);
```

Whenever you want to add a new animation, you will need to create a new “Scene”. The scene will contain the following elements:

triggerElement: The element to watch. In this case, we want the animation to start when #parallax enters the screen
triggerHook: The point on the screen when the animation starts. By default, the animation will start when the triggerElement hits the middle of the screen (“onCenter”), so we need to change it to “onEnter”
duration: How long will the animation last. If you set it to 100%, the animation will last one full screen. For parallax, we want it to last 200%, but you can play with this number until you get the desired results
setTween: This is a shorthand to add a GSAP animation. Here, we need to add the element we want to animate (in this case it’s the same one we are watching), and in an array, the animation information. For a simple parallax effect, we simply move the background vertically from 0 to 100%
addIndicators: If you want to see the trigger, start and end points of the animation, uncomment this line
addTo: Once our scene is complete, we’ll add to the controller

If you want to get better acquainted with these parameters, visit ScrollMagic’s examples, and in particular the Scene Manipulation example, where you can play with some of them.

Step 5 – Slide and pin animations

The next animation is the slide and pin animations for the second and third slides.

new ScrollMagic.Scene({
        triggerElement: "#slidein",
        triggerHook: "onLeave",
    })
    .setPin("#slidein")
    //.addIndicators() // add indicators (requires plugin)
    .addTo(controller);

new ScrollMagic.Scene({
        triggerElement: "#slidein2",
        triggerHook: "onLeave",
    })
    .setPin("#slidein2")
    //.addIndicators() // add indicators (requires plugin)
    .addTo(controller);

```
new ScrollMagic.Scene({
```

        triggerElement: "#slidein",

```
        triggerHook: "onLeave",
```
```
    })
```
```
    .setPin("#slidein")
```

    //.addIndicators() // add indicators (requires plugin)

```
    .addTo(controller);
```
```
 
```
```
new ScrollMagic.Scene({
```

        triggerElement: "#slidein2",

```
        triggerHook: "onLeave",
```
```
    })
```
```
    .setPin("#slidein2")
```

    //.addIndicators() // add indicators (requires plugin)

```
    .addTo(controller);
```

Both slides need the same animation:

triggerHook: we want the slides to become pinned to the screen once they are about to leave the screen, hence the “onLeave”
setPin: we set the animation to be one of ScrollMagic’s built-in behaviors, the pin. For this animation, GSAP is not necessary

If you look at ScrollMagic’s example of this effect, you will see how to make your code more efficient by automatically creating the animation for all slides at once, instead of having to create one per slide manually.

Step 6 – Other Animations

On the last slide, I have 3 animations. Each one requires the use of GSAP timelines. These timelines let us create more complex sequences than with a simple tween, as before.

In the first animation, we create a GSAP timeline that will have two points. It will start with our element #left placed 500 pixels to the left of the screen, and it will end with it at its original position.

var fromLeftTimeline = new TimelineMax();
var fromLeftFrom = TweenMax.from("#left", 1, {
    x: -500
});
var fromLeftTo = TweenMax.to("#left", 1, {
    x: 0
});
fromLeftTimeline
    .add(fromLeftFrom)
    .add(fromLeftTo);

var fromLeftTimeline = new TimelineMax();

var fromLeftFrom = TweenMax.from("#left", 1, {

```
    x: -500
```
```
});
```

var fromLeftTo = TweenMax.to("#left", 1, {

```
    x: 0
```
```
});
```
```
fromLeftTimeline
```
```
    .add(fromLeftFrom)
```
```
    .add(fromLeftTo);
```

We first create a new timeline, then we establish the starting, or “from” point, and then the end or “to” point. Lastly, we add them to the timeline.

Then we create our scene as before:

new ScrollMagic.Scene({
        triggerElement: "#slidein2",
        offset: 200,
    })
    .setTween(fromLeftTimeline)
    .duration(400)
    //    .reverse(false)
    //.addIndicators() // add indicators (requires plugin)
    .addTo(controller);

```
new ScrollMagic.Scene({
```

        triggerElement: "#slidein2",

```
        offset: 200,
```
```
    })
```
```
    .setTween(fromLeftTimeline)
```
```
    .duration(400)
```
```
    //    .reverse(false)
```

    //.addIndicators() // add indicators (requires plugin)

```
    .addTo(controller);
```

In this case, I added an offset of 200, so the start point is 200 pixels below the top of the #slidein2. We add the timeline via setTween(), and set the duration to a scroll of 400 pixels.

The reverse(false) can be uncommented if you want the animation to only happen once, instead of every time you scroll up or down.

Here are the other 2 animations, which are very similar. Each one has its own timeline, and scene:

// Fade in
var fadeInTimeline = new TimelineMax();
var fadeInFrom = TweenMax.from("#opacity", 1, {
    autoAlpha: 0
});
var fadeInTo = TweenMax.to("#opacity", 1, {
    autoAlpha: 1
});
fadeInTimeline
    .add(fadeInFrom)
    .add(fadeInTo);

new ScrollMagic.Scene({
        triggerElement: "#slidein2",
        offset: 200,
    })
    .setTween(fadeInTimeline)
    .duration(400)
    //    .reverse(false)
    //.addIndicators() // add indicators (requires plugin)
    .addTo(controller);

//Fly in from the left
var fromBottomTimeline = new TimelineMax();
var fromBottomFrom = TweenMax.from("#bottom", 1, {
    y: 300
});
var fromBottomTo = TweenMax.to("#bottom", 1, {
    y: 0
});
fromBottomTimeline
    .add(fromBottomFrom)
    .add(fromBottomTo);

new ScrollMagic.Scene({
        triggerElement: "#slidein2",
        offset: 200,
    })
    .setTween(fromBottomTimeline)
    .duration(400)
    //    .reverse(false)
    //.addIndicators() // add indicators (requires plugin)
    .addTo(controller);

```
// Fade in
```
```
var fadeInTimeline = new TimelineMax();
```

var fadeInFrom = TweenMax.from("#opacity", 1, {

```
    autoAlpha: 0
```
```
});
```

var fadeInTo = TweenMax.to("#opacity", 1, {

```
    autoAlpha: 1
```
```
});
```
```
fadeInTimeline
```
```
    .add(fadeInFrom)
```
```
    .add(fadeInTo);
```
```
 
```
```
new ScrollMagic.Scene({
```

        triggerElement: "#slidein2",

```
        offset: 200,
```
```
    })
```
```
    .setTween(fadeInTimeline)
```
```
    .duration(400)
```
```
    //    .reverse(false)
```

    //.addIndicators() // add indicators (requires plugin)

```
    .addTo(controller);
```
```
 
```
```
//Fly in from the left
```

var fromBottomTimeline = new TimelineMax();

var fromBottomFrom = TweenMax.from("#bottom", 1, {

```
    y: 300
```
```
});
```

var fromBottomTo = TweenMax.to("#bottom", 1, {

```
    y: 0
```
```
});
```
```
fromBottomTimeline
```
```
    .add(fromBottomFrom)
```
```
    .add(fromBottomTo);
```
```
 
```
```
new ScrollMagic.Scene({
```

        triggerElement: "#slidein2",

```
        offset: 200,
```
```
    })
```
```
    .setTween(fromBottomTimeline)
```
```
    .duration(400)
```
```
    //    .reverse(false)
```

    //.addIndicators() // add indicators (requires plugin)

```
    .addTo(controller);
```

Conclusion

You can look at the result here.

I’d recommend that you take some time to check out the other examples ScrollMagic has available, and GSAP’s Jump Start examples to better understand your animation options.