How can I use ScrollMagic for better scrolling animations?

Animations are becoming increasingly popular among today's websites. One creative way to incorporate animations into your website is to have a user's mouse scroll trigger the animations. This adds a sense of interactivity that today's users are familiar with and often enjoy. But, when you are triggering a lot of scroll animations all throughout your site, it becomes complex to organize those animations in your code as well as allow browser support for all modern browsers.

Introducing ScrollMagic

ScrollMagic is a fun, relatively small jQuery plugin that allows you to group scroll animations into easy to manage scenes and controllers. You can trigger events on these scenes as you scroll to the trigger point on your site.

To start using ScrollMagic, first go to scrollmagic.io to download the most recent copy of the jQuery plugin library and link to downloaded files in your markup.

Next, we need to create a ScrollMagic controller in a JavaScript file. Use the following code:

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


After you have your controller set up, create your first scene:

// Create your scene
$(".yourSelector").each(function() {

new ScrollMagic.Scene({
triggerElement: this
})
.addIndicators()
.setPin(this)
.setClassToggle(".yourSelector", "active")
.addTo(myController);

});


What this is saying is anytime your selector is passed the trigger, which in this case is the top of the screen, you are going to pin the element so that it is now position: fixed and your selector will gain the class of .active.

The .addIndicatiors() line is going to add markers to the side of your screen so that you can see exactly where your trigger point is and where your scene begins. This is helpful for debugging your scenes while in development mode. Just remember to remove this line before pushing your site to production.

This is just scratching the surface on how to get started using ScrollMagic for your scrolling animations. For more information on what calls and events can be used on your scene, check out the documentation.