ScrollMagic – A jQuery plugin for magical scroll interactions

ScrollMagic adds a pinch of magic on your web design projects with some great scroll interactions.

ScrollMagic - A jQuery plugin for magical 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


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.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.


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


// add multiple scenes at once

var scene2;


scene, // add above defined scene

scene2 = new ScrollScene({duration: 200}), // add scene and assign handler "scene2"

new ScrollScene({offset: 20}) // add anonymous scene


Demo Examples Download

Check out the examples or the documentation for full reference.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *