A Simple One Page Template Using ScrollMagic

A Simple One Page Template Using ScrollMagic

Last time we have created A Simple ScrollMagic Template with intro screen and 3 full screen slides.

Today we will add a few blocks of content that only take as much space as the content inside of them.

I call them break sections.

What you will learn from this template?

  • How to use multiple ScrollMagic scenes.
  • How to use a callback function using ScrollMagic.
  • How to remove a class on scroll.
  • And much more

2. A Simple One Page Template using ScrollMagic

ScrollMagic and Multiple Scenes



Our second template has 3 additional “break sections” that do not fill the height of the viewport, but are only as tall as their content.

<article id="cb01" class="content-block">...</article>
<article id="slide01" class="slide fs">...</article>
<article id="cb02" class="content-block">...</article>
<article id="slide02" class="slide fs">...</article>
<article id="cb03" class="content-block">...</article>
<article id="slide03" class="slide fs">...</article>

To get the stagger animation work, we add additional classes to our stylesheet.

/* =Simple animation up */
.slideInUp {
    &.slideInUp2{transition-delay: 0.2s;}
    &.slideInUp3{transition-delay: 0.4s;}

.slideInUp2 and .slideInUp3 classes will run with a slight delay and will create the stagger effect for us.

If you have more elements, you would need more classes, longer delays etc.

<header class="slideInUp">
    <h1>First element sliding up</h1>
    <p class="slideInUp slideInUp2">Second element sliding up.</p>
    <p class="slideInUp slideInUp3">Third element sliding up.</p>

All we have to do with ScrollMagic is add class .is-active to our break sections.

ScrollMagic Scenes

Here is a visual breakdown of our multiple ScrollMagic Scenes.

A Simple One Page Template Using ScrollMagic

Again we get an array of these sections and create a ScrollMagic Scene for each of them inside of the forEach loop.

// get all break up sections
var breakSections = ["#cb01", "#cb02", "#cb03"];

// change color of the nav for dark content blocks
breakSections.forEach(function (breakSection, index) {

    // number for highlighting scenes
    var breakID = $(breakSection).attr('id');

    // make scene
    var breakScene = new ScrollMagic.Scene({
        triggerElement: breakSection, 
        offset: -95
    .setClassToggle('#'+breakID, 'is-active')
    .on("enter", function (event) {

Here we are doing two things.

Adding .is-active class to the break section and adding .is-light class to the nav.

ScrollMagic toggleClass

To change the color of the nav back to white, we create a new scene that will remove the attribute class from the nav once a new slide reaches the middle of the viewport.

// change color of the nav back to white
slides.forEach(function (slide, index) {

    var slideScene = new ScrollMagic.Scene({
        triggerElement: slide
    .on("enter", function (event) {

In other words the breakScene and slideScene are toggling the .is-light class on the nav.


In the next post we create A Simple Parallax Template using ScrollMagic and GreenSock.

Check it out!

And if you have any questions please get in touch in the comments.

Other ScrollMagic and GreenSock Tutorials

Download Free Toolkit

All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.

100% Privacy. Guaranteed! Powered by ConvertKit

11 thoughts on “A Simple One Page Template Using ScrollMagic

  1. Faris M A

    Everything looks great except adding “is-light” class not working on scrolling upwards. How to do it on scrolling both upwards and downwards?

  2. Susan G

    Works great on Firefox is basically a normal website on Chrome.. Wish it was set up for all browsers. I’m also using Ubuntu not sure if that matters.

  3. Luis

    Hey just to let you know I can’t get the demos to work (any of the five demos), I am using chrome on a windows 10 laptop, also tried it it firefox with no luck.
    I don’t know what could be going wrong, so I am going to stick with skrollr for the time being I think then.

    1. Petr Tichy Post author

      Hi Luis, can you clarify what you mean by “it doesn’t work”? Is it he files after you’ve dowloaded them or the live demos?

      1. Luis

        Hi Petr, sorry I wasn´t clear, I meant the live demos. They just look like regular pages (no movement)

  4. lars

    Dear Petr i samen here none of the five demo’s is working in firefox or chrome. They however do work in IE and Edge.

  5. Shatakshi

    I am trying to integrate the above code with a worpdress custom child theme. But somehow java script does not seem to be working.
    Glad if you could help me with this.

  6. Jürgen

    Hi Petr,
    I’m new to ScrollMagic and GreenSock and your Tutorials are a great resource, thanks for that!

    Sadly, this and the following Demos are “stuttering” a bit in Chrome and Safari if I scrolling with the mouse wheel (Trackpad works fine). But of course that’s not your or the libraries fault. Hope, the Browser manufacturer improving this in the future…


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.