ScrollMagic adds a pinch of magic on your web design projects with some great scroll interactions.
ScrollMagic is jQuery plugin which lets you to use several options of the scrollbar features and includes a great deal of scroll effects such as: starting animation at a specific scroll position, ability to synchronize an animation to the scrollbar movement, creating sticky elements with pinning it at a specific scroll position, easily adding a parallax effect to your website and also creating an infinitely scrolling pages with ajax loading of the additional content.
The interesting thing about ScrollMagic is that it is a rewrite of Superscrollrama by John Polacek. Both plugins rely on the Greensock Animation Platform (GSAP) to build animations but ScrollMagic is developed with specific regards to former weaknesses.
ScrollMagic is better from its predecessor because of some great perks:
- Optimized performance
- Mobile compatibility
- Responsive design ready
- Flexibility
- Support for both scroll directions (even different on one page)
- Support for scrolling inside div container (even multiple on one page)
- object oriented programming and object chaining
- readable, centralized code and intuitive development
- detailed documentation
- many application examples
- extensive debugging and logging capabilities
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.
// 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 multiple scenes at once
var scene2;
controller.addScene([
scene, // add above defined scene
scene2 = new ScrollScene({duration: 200}), // add scene and assign handler "scene2"
new ScrollScene({offset: 20}) // add anonymous scene
]);
Check out the examples or the documentation for full reference.