ScrollMagic helps you to easily react to the user's current scroll position.
It's the perfect library for you, if you want to ...
ScrollMagic is a scroll interaction library.
To implement animations, ScrollMagic can work with multiple frameworks. The recommended solution is the Greensock Animation Platform (GSAP) due to its stability and feature richness. For a more lightweight approach the VelocityJS framework is also supported. Alternatively custom extensions can be implemented or the necessity of a framework can be completely avoided by animating simply using CSS and class toggles.
ScrollMagic was developed with these principles in mind:
Is ScrollMagic the right library for you?
To get your copy of ScrollMagic you have the choice between four options:
Option 1: GitHub
Download a zip file containing the source code, demo page, all examples and documentation from the GitHub releases page or clone the package to your machine using the git command line interface:
git clone git://github.com/janpaepke/ScrollMagic.git
Option 2: Bower
ScrollMagic is also available on bower and will only install the necessary source code, ignoring all example and documentation files.
Please mind that since they are not core dependencies, you will have to add frameworks like GSAP, jQuery or Velocity manually, should you choose to use them.
bower install scrollmagic
Option 3: npm
If you prefer the node package manager, feel free to use it.
Keep in mind that like with bower non-crucial files will be ignored (see above).
npm install scrollmagic
Option 4: CDN
If you don't want to host ScrollMagic yourself, you can include it from cdnjs:
All plugins and uncompressed files are also available on cdnjs.
Include the core library in your HTML file:
And you're ready to go!
For deployment use the minified version instead:
NOTE: The logging feature is removed in the minified version due to file size considerations.
To use plugins like the indicators visualization, simply include them additionally to the main library:
To learn how to configure RequireJS, when using AMD, please read here.
The basic ScrollMagic design pattern is one controller, which has one or more scenes attached to it.
Each scene is used to define what happens when the container is scrolled to a specific offset.
Here's a basic workflow example:
// init controllervar controller = ;// create a sceneduration: 100 // the scene should last for a scroll distance of 100pxoffset: 50 // start this scene after scrolling for 50px// pins the element for the the scene's duration; // assign the scene to the controller
To learn more about the ScrollMagic code structure, please read here.
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.
ScrollMagic aims to support all major browsers in recent versions:
Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+
I am a digital creative based in Lausanne, Switzerland.
ScrollMagic is dual licensed under the MIT license and GPL.
For more information click here.
This library was made possible by many people who have supported it with passion, donations or advice. Special thanks go out to: John Polacek, Jack Doyle, Paul Irish, Nicholas Cerminara, Kai Dorschner, Petr Tichy and Dennis Gaebel.