ScrollMagic helps you to easily react to the user's current scroll position.
It's the perfect library for you, if you want to ...
- animate based on scroll position – either trigger an animation or synchronize it to the scrollbar movement (like a playback scrub control).
- pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky elements).
- toggle CSS classes of elements on and off based on scroll position.
- effortlessly add parallax effects to your website.
- create an infinitely scrolling page (ajax load of additional content).
- add callbacks at specific scroll positions or while scrolling past a specific section, passing a progress parameter.
Download your copy now in form of a ZIP Package or visit the GitHub project page to find out about other sources.
Help
To learn more about ScrollMagic check out the the examples and read the documentation.
Should you run into any problems when using ScrollMagic, please follow the troubleshooting guide before posting your question in the GitHub issues section.
About
ScrollMagic is a complete rewrite of its predecessor Superscrollorama by John Polacek.
A plugin-based architecture offers easy customizability and extendability.
ScrollMagic was developed with these principles in mind:
- optimized performance
- lightweight (6KB gzipped)
- flexibility and extendibility
- mobile compatibility
- event management
- support for responsive web design
- 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
Made with ScrollMagic
Check out these amazing websites that were created using ScrollMagic.
Credits
ScrollMagic © Jan Paepke follow @janpaepke
Demo Page made by Nicholas Cerminara from @scotch_io
Support ScrollMagic
Maintaining and updating ScrollMagic takes up a lot of my time. To be able to provide the project with the attention it deserves, I decided to experiment with including ads (feedback & evaluation pending).
If the plugin saved you some time or helped you to create something awesome, please consider making use of the donate button above. Or you could have a closer look at the message from our sponsor below.
Thank you!