ScrollMagic Tutorial – Fullscreen Slideshow

ScrollMagic Tutorial – Fullscreen Slideshow

In this ScrollMagic tutorial we’ll build a simple scrolling slideshow with a fullscreen sections.

You’ll learn how to lock elements when they reach a certain point and get familiar with triggerHook, triggerElement, setPin, addIndicators and setClassToggle terms.

VIEW DEMO

What you will learn:

  • How to pin multiple sections
  • How to use indicators for easy debugging
  • How to toggle body class with ScrollMagic
  • and much more…

Lets start with a plain simple html for our 4 sections.

1. HTML and CSS For Fullscreen Sections

Create 4 section elements and give them a unique ID. We’ll use this ID for styling purposes.

The HTML markup should look like this:

<section id="one">
    <div class=“inner”>
        <h1>Slide Title</h1>
        <p>Slide description text goes here.</p>
    </div>
</section>
<section id="two">…</section>
<section id="three">…</section>
<section id="four">…</section>

The .inner will keep the text centered and have the max-width set to 85% to prevent text touching the edges of the browser on smaller screens.

Here’s the CSS:

/* Sass color variables */
$blue: #0089cd;
$white: #ffffff;    

/* Make the body 100% of the browser viewport height */
html, body {
    height: 100%;
    margin: 0;
}
h1 {
    padding: 20% 0 0 0;
    margin: 0;
    text-align: center;
    font-size: 20px;
}
p {
    text-align: center;
    color: transparentize($white, 0.5);
}
strong {
    color: #fff;
}

/* Make each section 100% of the browser viewport height */
section {
    height: 100%;
    color: white;
    position: relative;
    text-align: center;

    /* Center the content of the sections */
    .inner {
        margin: 0 auto;
        max-width: 85%;
    }
}

/* Background colors for each section */
section#one { background-color: $blue; }
section#two { background-color: darken($blue, 10%); }
section#three { background-color: lighten($blue, 5%); }
section#four { background-color:  darken($blue, 10%); }

I am using Sass for my CSS, in case you are wondering why some of the elements are nested.

I am using lighten and darken for the alternative background colors, if that doesn’t make sense read this article.

2. Include ScrollMagic

ScrollMagic Tutorial

Include jQuery and ScrollMagic plugin at the bottom of your html. If you are familiar with vanilla JavaScript you don’t need to load jQuery, since the 2.0 version ScrollMagic doesn’t require jQuery.

Vanilla JavaScript is a JavaScript without the use of a library (eg. jQuery, Mootools) some people call it pure JavaScript.

    <!— Include jQuery —>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>window.jQuery || document.write(‘<script src="js/vendor/jquery-1.11.0.min.js"><\/script>’)</script>

    <!— Include ScrollMagic —>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
		
    <!— Include main.js for our custom code —>
    <script src="js/main.js"></script>
</body>
</html>

main.js is a file where we’ll be adding the ScrollMagic code.

Create an empty main.js file inside of a js folder.

3. Create a ScrollMagic Controller

ScrollMagic Controller

The first thing we need to do in our main.js is to create a ScrollMagic controller.

Here is the jQuery option:

/* Using jQuery */
(function($) {

    // Init ScrollMagic
    var ctrl = new ScrollMagic.Controller({
        globalSceneOptions: {
            triggerHook: 'onLeave'
        }
    });

})(jQuery);

If you are using pure JavaScript, you wouldn’t need the two lines highlighted above.

/* Using vanilla JavaScript */

// Init ScrollMagic
var ctrl = new ScrollMagic.Controller({
    globalSceneOptions: {
        triggerHook: 'onLeave'
    }
});

In simple terms this means:

Hey scrollbar, animate the thing I’ll tell you when I’ll tell you.

There are a few other settings for triggerHook – onEnter, onCenter (default), onLeave.

I’ve explained that in more details in SVG Scrolling Animation Triggered By ScrollMagic.

4. Create a ScrollMagic Scene And Pin Sections

ScrollMagic setPin

We want each of the sections to be pinned or fixed when they reach the top of the viewport. For that we’ll use the jQuery .each function.

// Create scene
$("section").each(function() {

    new ScrollMagic.Scene({
        triggerElement: this
    })
    .setPin(this)
    .addTo(ctrl);

});

By default the ScrollMagic trigger is positioned in the middle of the viewport but we’ve set triggerHook: onLeave in the previous step. That’s why the sections are fixed when they reach top of the viewport.

this refers to the individual sections.

triggerElement: this tells the scrollbar:

Hey scrollbar, when the section reaches the top of the viewport, pin it.

If you did everything right you should see each section fixed to the top and the following section overlapping the previous one when you scroll.

Pretty simple huh?

You can read more on .setPin in the ScrollMagic documentation.

5. Using ScrollMagic Indicators For Easy Debugging

ScrollMagic addIndicators

Our example is very simple, but lets have a look how you can include and customize indicators to debug more complex scrolling animations.

Include debug.addIndicators.min.js below the ScrollMagic reference.

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

Now update the main.js and include .addIndicators in our scene.

// Create scene
$("section").each(function() {

    var name = $(this).attr('id');

    new ScrollMagic.Scene({
        triggerElement: this
    })
    .setPin(this)
    .addIndicators()
    .addTo(ctrl);

});

Now you should see right aligned indicators, visually showing you the trigger position and when each scene starts and ends.

ScrollMagic Indicators

The default styling of these elements (red, green, blue) can be overwritten to suit your design.

We’ll set our indicators to lighter colors to make them easier to read.

.addIndicators({
    colorStart: "rgba(255,255,255,0.5)", 
    colorEnd: "rgba(255,255,255,0.5)",  
    colorTrigger : "rgba(255,255,255,1)", 
    name:name 
})

This will change the color of our indicators to white.

We are also passing the ID of our sections to the name.

Now the labels read start two, start three etc. Again this is very handy for more complex ScrollMagic animations.

You can read more on .addIndicators in the ScrollMagic documentation.

6. Use loglevel() For Even More Detailed Debugging

ScrollMagic loglevel

If the indicators are not enough, you can also get a lot of useful info logged in the web developer tools console.

Add .loglevel to the scene like this:

.setPin(this)
.addIndicators()
.loglevel(3)
.addTo(ctrl);

When you now open the console, you’ll see a lot of data related to the scrolling animations and events.

ScrollMagic Loglevel

We might explore all this data next time, for now just keep in mind that you have a lot of debugging tools available at your fingerprints when using ScrollMagic.

7. Changing The Body Class On Scroll

ScrollMagic setClassToggle

The last thing we’ll cover today is how to change a class of any element based on the scroll position.

This can be very handy if you want to:

  • change body class when the user scrolls past a certain point
  • animate menu in/out of the view
  • trigger CSS animations defined in your stylesheet

We’ll create a new ScrollMagic scene and use the .setClassToggle method.

// get window height
var wh = window.innerHeight;

new ScrollMagic.Scene({
  offset: wh*3
})
.setClassToggle("section#four", "is-active")
.addTo(ctrl);

This means that section#four gets a class .is-active when the body is 300% or 3x window heights out of the viewport.

If you want to include multiple classes, simply list all of them separated by space like this: 

.setClassToggle("section#four", "is-active another-class")

Add the following CSS to see the last section fade to black.

section#four {
  background-color:  darken($blue, 10%);
  transition: all 0.4s linear;
  &.is-active {
    background-color: #222222;
  }
}

You can read more on .setClassToggle in the ScrollMagic documentation.

8. The Final Result

See the Pen ScrollMagic Tutorial – Fullscreen Slideshow by Petr TIchy (@ihatetomatoes) on CodePen.4864

If you’ve enjoyed this tutorial you might also like SVG Scrolling Animation Triggered By ScrollMagic.

Related ScrollMagic and GreenSock articles

Conclusion

Now you know how to include ScrollMagic, pin elements, customize indicators and toggle a CSS class on page scroll.

Next time we’ll trigger a simple Greensock timeline.

Sign up to my email list for more ScrollMagic tutorials and demos.

And let me know in the comments if there are any specific websites or examples you would like me to cover in the future tutorials.

Until next time, happy scrolling.

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

29 thoughts on “ScrollMagic Tutorial – Fullscreen Slideshow”

  1. Fahim

    Hi Petr Tichy,

    Its a good article to get started with scrollmagic.

    Suppose i have 4 section of slide show and then i dont want to have slideshow and just want normal elements.

    One addition to other readers of this wondefull article if you are putting these section in columns or row of bootstrap make sure make it 100% height else will not work.

    Reply ↓
    1. Petr Tichy Post author

      Thanks Fahim. You would need to set a duration for the pin elements and unpin them when the normal content comes in a view.

      I might include that in my next ScrollMagic demos.

      Also thanks for sharing the note for Bootstrap users.

      Reply ↓
  2. mike

    Hi Petr,

    I am trying to use your tutorial. Its working fine, but when I use it on one page website here http://qbfweb.com/dac/ . On “our services” i have the scrollmagic effect. But when I go under “Our services” and want to go back to “Our Services” its not working coz its under the “testimonials” page.

    Reply ↓
  3. Ricardo Velarde

    Hello Petr,

    I wanted to say how much I appreciate and love your tutorials. I was having a hard time learning scroll magic on my own. Your tutorial helps a lot! I look forward to the next.

    Thanks 🙂

    Reply ↓
  4. Richard

    hello Petr,

    any chance you would consider doing a horizontal scrollmagic demo? Can scrollmagic work both vertical and horizontal at the same time?

    Reply ↓
    1. Petr Tichy Post author

      Hi Richard, sure I’ll consider horizontal ScrollMagic demo for my future demos.

      To answer your question: yes it can be used for both directions at the same time.

      Refer to this demo:

      http://janpaepke.github.io/ScrollMagic/examples/expert/multiple_scroll_directions.html

      Reply ↓
    1. Petr Tichy Post author

      Hey Al, currently you are creating a ScrollMagic scene for each of your sections in the $("section").each() function, but what you could do instead is to pin the first section, then have a normal page flow and then pin the third section when it comes to a view.

      That way your second section could contain as much content as you need.

      Or you could try to scroll just within the second section when it’s in a view, but that might more complex.

      Hope that helps.

      Reply ↓
      1. Al Lemieux

        Petr,

        OK, I’ll have to look into pinning. How do you figure out the distance and calculate the duration? Is it the height of the content or the height of the viewport? Confused.

        Reply ↓
      2. Al Lemieux

        Actually, I think I found the solution. Each sections height was set to 100%. The CSS forces that section to be that height.

        Reply ↓
  6. Siddhant Singh

    Hi Petr,
    I am trying this again and again, but unfortunately, im getting nothing. I dont know where i am making the mistake.
    Is there any video tutorial on this blog?
    Please help!

    Reply ↓
  8. Siddhant Singh

    Hi Petr,
    I am trying this again and again, but its not working…
    please have a look at.

    https://drive.google.com/open?id=0B4-Wall5Acz8Y1dCdWxTMlV1QWs

    Reply ↓
  9. Siddhant Singh

    Hi there, thanks for the help Shashank.
    I think i have included all the required scripts at the end of body..
    you can see.
    https://drive.google.com/open?id=0B4-Wall5Acz8Y1dCdWxTMlV1QWs
    .
    telme if it requires something else.

    Reply ↓
    1. Shashank Bhattacharya

      Almost done,
      You need to put the java script after . As Petr is not using document.onload function, so you need to use the javascript at the end of body.

      window.jQuery || document.write(‘’)

      // Create scene
      $(“section”).each(function() {

      new ScrollMagic.Scene({
      triggerElement: this
      })
      .setPin(this)
      .addTo(ctrl);

      });

      here is the link to download the file http://codepen.io/ihatetomatoes/share/zip/qEGqxw/

      Reply ↓
  11. Sandro

    Hi,

    We are having issues with Safari, there is a visible jump when second slide hits the top of the window. I think it has something to do with safaris top bug.

    In your demo it is much less pronounced, because you use colours, in our case with images and other graphics this jump is pronounced… happens only in safari, any ideas how to fix it?

    Demo: http://sandbox.weare.de.com/wearede/build/

    Reply ↓
      1. sandro

        Hi, thanks for the reply.

        Yes those demos also have issue, whenever pinning is invoked. I think there is some problem with how safari calculates top:0; I think it has something to do with safari feature that allows website to be seen from toolbar transparency.

        Reply ↓
  12. Nikolaos Vassos

    Hey there Petr, I was wondering how to make something similar but all sections to start pinned on top stacked on each other and when you scroll, each section scrolls up and the section underneath stays pinned till the previous section is completely finished scrolling like its here. Pretty much I wanna emulate this. Can it be done using scrollmagic? I would appreciate an email rather a reply.

    http://alh.degordian.com/

    Reply ↓
      1. Nikolaos Vassos

        Hey Petr, thanks for the reply, I have actually been using it and I registered for your online course as well. But I haven’t gotten to the part whee I am able to do that so looking at your example I was able to do this http://173.247.242.190/~theage6/staging/the_liddel_main_dev/

        But i can’t get the other section to go all the way up so it stops mid way. Any pointers?

        Reply ↓
  13. Oleg Obodin

    Hello Petr, when I added multiple classes from this example:

    “If you want to include multiple classes, simply list all of them separated by space like this:

    01
    .setClassToggle(“section#four”, “is-active another-class”)”

    I got error in console :

    ScrollMagic.min.js:3 Uncaught InvalidCharacterError: Failed to execute ‘add’ on ‘DOMTokenList’: The token provided (‘flipInX animated’) contains HTML space characters, which are not valid in tokens.

    P/S sorry, my English so bad

    Reply ↓

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.