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

VIEW DEMO DOWNLOAD FILES

HTML and CSS

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>
</header>
<section>
    <p class="slideInUp slideInUp2">Second element sliding up.</p>
    <p class="slideInUp slideInUp3">Third element sliding up.</p>
</section>

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.

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) {
        $('nav').attr('class','is-light');
    })
    .addTo(controller);
});

Here we are doing two things.

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

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) {
        $('nav').removeAttr('class');
    })
    .addTo(controller);
});

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

Conclusion

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

• Simple ScrollMagic Tutorial
• ScrollMagic Tutorial – Fullscreen Slideshow
• Simple GreenSock Tutorial – Your first steps with GSAP
• GreenSock TimelineLite Tutorial
• GreenSock Workshop – Online course with over 8hrs of GreenSock Tutorials