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.

In case you're in a hurry or the above methods don't work, you can get personalized 1:1 support from me here:



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

License Information

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!