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.
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.
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.