Have you tried to use ScrollMagic to trigger some CSS and JS animations, but was it over your head?

Don’t worry, you are not alone.

To help you get started with ScrollMagic I have put together 5 ScrollMagic templates, that you can download, explore and use.

In the next 5 blog posts I will publish each of the templates with a short explanation of the ScrollMagic, GreenSock code and the source files for you to download.

Take these templates apart to learn how ScrollMagic and GreenSock work.

From Simple To More Complex

1. A Simple ScrollMagic Template – in this post
2. A Simple One Page Template Using ScrollMagic
3. A Simple Parallax Template Using ScrollMagic And GreenSock
4. A Simple One Page Template With A Preloading Screen
5. A Simple ScrollMagic Template With Pinned Sections

ScrollMagic Examples

There are some cool ScrollMagic examples out there, such as PrimeIT, Railsware, Riiot Labs or Bonne Marque.

Mastering ScrollMagic and GreenSock will let you turn any of your ideas into more engaging interactive websites.

What you will learn from these templates?

• How to trigger CSS animations using ScrollMagic
• How to control duration of scrolling animations using ScrollMagic
• How to disable animations on touch and mobile devices
• How to setup stylesheet with breakpoints for smaller screens
• How to change navigation color based on a current slide

We will start with a simple template and gradually add more advanced code in the following templates.

Source files include:

• SCSS stylesheet
• Unminified JS file
• Gulp config file
• Easily compile, minify, watch and compress JS and SCSS files
• main.js file with comments
• Some templates include GreenSock and relevant plugins

My assumption is that you are already fairly familiar with HTML and CSS.

We won’t cover a lot of it in my explanations, but if there is anything unclear, please get in touch in the comments.

Let’s go!

1. A Simple ScrollMagic Template

The first template is very basic, all we are doing here is adding a class .is-active to .slide container to trigger CSS transition.

VIEW DEMO DOWNLOAD FILES

HTML and CSS

In the HTML have a few full screen containers .fs, that have their height set to 100vh to cover the whole viewport.

.fs {height: 100vh;}

We have also included ScrollMagic and addIndicators plugin under the jquery reference at the bottom of our html.

<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="js/main.js"></script>

All our custom code is in the main.js file.

JavaScript

The class is added to the individual slides when the header of each slide reaches almost the middle of the viewport.

// Init ScrollMagic
var controller = new ScrollMagic.Controller();

// get all triggers - headers of all 3 slides
var headers = ["#slide01 header", "#slide02 header", "#slide03 header"];

// SCENE 1
// create scenes for each of the headers
headers.forEach(function (header, index) {
	    
    // number for highlighting scenes
    var num = index+1;

    // make scene
    var headerScene = new ScrollMagic.Scene({
        triggerElement: header, 
        offset: -95
    })
    .setClassToggle('#slide0'+num, 'is-active')
    .addTo(controller);
});

header of each slide is the triggerElement and we are using offset to trigger this animation 95 pixels earlier than the default trigger position which is the center of the screen.

We are creating the scenes inside of a for each loop, because we want all slides to have the same animation.

The animation itself is defined in the stylesheet.

/* =Simple animation up */
.slideInUp {
	.no-touch & {
	    visibility: hidden;
	    opacity: 0;
	    transition: all 0.7s ease-out;

	 	    -webkit-transform: translate3d(0, 50px, 0);
	    transform: translate3d(0, 50px, 0);
	}
	.no-touch .is-active & {
	    visibility: visible;
	    opacity: 1;
	    -webkit-transform: translate3d(0, 0, 0);
	    transform: translate3d(0, 0, 0);
	}
}

A few elements have a class .slideInUp and once we add the class .is-active to the parent .slide container, we are fading these elements in.

We are also changing the color of the navigation to dark when we reach the white section, simply by adding a class .is-dark to the nav.

// SCENE 2
// change color of the nav for the white slide
var navScene = new ScrollMagic.Scene({
    triggerElement: '.slide.is-light'
})
.setClassToggle('nav', 'is-dark')
.addTo(controller);

This is another ScrollMagic scene, with the top of the white slide being the triggerElement.

We are using the .setClassToggle() method to toggle class .is-dark on the nav.

Related ScrollMagic API

• Controller
• Scene
• addTo
• setClassToggle
• triggerElement
• offset

Conclusion

In the next post we will create A Simple One Page Template using ScrollMagic.

You can also check out this step by step tutorial on How To Create A Scrolling Slideshow Using ScrollMagic, it goes more into the details of ScrollMagic API.

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