#ScrollMagic v1.3.0

###The jQuery plugin for magical scroll interactions.

ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar like a playback scrub control.
It's the plugin for you, if you want to ...

• ... start an animation at a specific scroll position.
• ... synchronize an animation to the scrollbar movement.
• ... pin an element at a specific scroll position (sticky elements).
• ... pin an element for a limited amount of scroll progress (sticky elements).
• ... easily add a parallax effect to your website.
• ... create an inifinitely scrolling page (ajax load of additional content).
• ... call functions when the user hits certain scroll positions or react in any other way to the current scroll position.

Check out the demo page, browse the examples or read the documentation to get started.

##About the Plugin

ScrollMagic is a complete rewrite of its predecessor Superscrollorama by John Polacek.
Like Superscrollorama it relies on the Greensock Animation Platform (GSAP) to build animations, but was developed with specific regard to former shortcomings.

The major perks of using ScrollMagic include:

• optimized performance
• flexibility
• mobile compatibility
• event management
• ready for responsive webdesign
• object oriented programming and object chaining
• readable, centralized code and intuitive development
• support for both scroll directions (even different on one page)
• support for scrolling inside div containers (even multiple on one page)
• extensive debugging and logging capabilities
• detailed documentation
• many application examples

Is ScrollMagic the right plugin for you?
ScrollMagic takes an object oriented approach using a controller for each scroll container and multiple "scroll scenes" to define what should happen at what point in time. While this offers a great deal of control it might be a little confusing, especially if you're just starting out with javascript.
If the above points are not crucial for you and you are just looking for a simple solution to implement basic css animations I would strongly recommend taking a look at the awesome skrollr project. It almost solely relys on element attributes and thus requires minimal to no javascript knowledge.

Installation

Aside from jQuery make sure you have loaded the Greensock Animation Plattform (TweenMax).
To use ScrollMagic in your project simply include the plugin js file in the head section of your HTML file:

<script type="text/javascript" src="js/jquery.scrollmagic.js"></script>

For deployment use the minified version instead:

<script type="text/javascript" src="js/jquery.scrollmagic.min.js"></script>

NOTE: The logging feature is removed in the minified version for obvious file size considerations.

To have access to the debugging extension during development, include this file additionally:

<script type="text/javascript" src="js/jquery.scrollmagic.debug.js"></script>

You can remove the debugging extension for actual deployment.

Usage

The basic ScrollMagic design pattern is one controller, which has several scenes attached.
Each scene has a definite start and end position and defines what happens when the container is scrolled to the specific offset.

/*
	Basic workflow example
*/

// init controller
var controller = new ScrollMagic();

// assign handler "scene" and add it to controller
var scene = new ScrollScene({duration: 100})
				.setPin("#my-sticky-element") // pins the element for a scroll distance of 100px
				.addTo(controller); // add scene to controller

// adding multiple scenes at once
var scene2 = new ScrollScene();
var scene3;
controller.addScene([
	scene2,
	scene3 = new ScrollScene({duration: 200}), // add scene and assign handler "scene2"
	new ScrollScene({offset: 20}) // add anonymous scene
]);

##Help To get started check out the available learning resources in the wiki section.
Be sure to have a look at the examples to get source code pointers and make use of the documentation for a complete reference.

If you're having trouble using ScrollMagic please read the support guidelines.
Should you still be unable to figure it out, feel free to post your questions in the project's issues section.

##Browser Support

ScrollMagic aims to support all major browsers in recent versions:
Firefox 26+, Chrome 30+, Safari 6+, Opera 19+, IE 9+

##About the Author

I am a freelance Art Director based in Lausanne, Switzerland.
I started this project to deepen my understanding of javascript (which it has).

Check out my website or Follow me on Twitter

##License

ScrollMagic is dual licensed under the MIT license and GPL.
For more information click here.
Click here to get more information on greensock licensing.