Awesome JavaScript Library For Magical Scroll Interactions - ScrollMagic

Awesome JavaScript Library For Magical Scroll Interactions - ScrollMagic

ScrollMagic is an awesome jQuery animation JS library that allows you to do lots of cool stuffs when scrolling down/up your web & mobile page.

With jQuery ScrollMagic plugin, you can...

  • Start an animation at a specific scroll position.
  • Synchronize an animation to the scrollbar movement.
  • Pin an element at a specific scroll position (sticky elements).
  • Pin an element for a limited amount of scroll progress (sticky elements).
  • Easily add a parallax effect to your website.
  • Create an infinitely scrolling page (ajax load of additional content).
  • Call functions when the user hits certain scroll positions or react in any other way to the current scroll position.

How to use it:

1. Include the jQuery javascript library and jQuery ScrollMagic plugin in the head section of the document.

<script src=""></script>
<script type="text/javascript" src="js/jquery.scrollmagic.min.js"></script>

2. Include the required Greensock Animation Plattform's TweenMax.min.js script in the document.

<script type="text/javascript" src="js/_dependent/greensock/TweenMax.min.js"></script>

3. Initialize the plugin and do some stuffs in the javascript.

// init controller
var controller = new ScrollMagic();
// assign handler "scene" and add it to Controller
var scene = new ScrollScene({duration: 100})
// 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


v2.0.6 (2018-10-09)

  • Bugfixes

v2.0.5 (2015-04-30)

  • Fixed: a JS error occurred in IE9 see here
  • Fixed: cascading pins of absolutely positioned elements didn't work see here
  • Fixed: scene state wasn't correct at start position see here
  • Fixed: updatePinState was called before scrollOffset update

v2.0.4 (2015-04-08)

  • fixed JS error in IE9

v2.0.0 (2015-02-26)

  • removal of all dependencies (jQuery & GSAP) – ScrollMagic is now stand-alone.
  • new file structure
  • new scene event: add fires when scene is added to a controller
  • new scene event: remove fires when scene is removed from a controller
  • option changes in Scene.addIndicators()
  • several performance tweaks
  • lots more info and warning messages (in the uncompressed development version)

v1.3.0 (2014-11-13)

  • changed AMD loader behavior to export only one object -> {Controller: ScrollMagic, Scene: ScrollScene}
  • added Error message for missing dependencies
  • fixed bubbling of pseudo-resize event of div containers
  • reference bug with AMD loading

v1.2.3 (2014-10-25)

  • fixed: reference bug when using asynchronous loading

v1.2.2 (2014-10-21)

  • fixed: Error message with wrong loading order

v1.2.0 (2014-10-16)

  • AMD loader support
  • added warning for tweens being overwritten
  • better code for mobile clicks 
  • updated draw example to camel case to support Firefox
  • updated parralax sections example to moving divs instead of background position
  • added new references
  • added favicon
  • scroll momentum increased in Firefox over fixed elements 
  • parallax example was juggy in Firefox and Safari -> removed reliance of TweenMax ticker in favor of requestAnimationFrame 
  • bugfix for pinned elements jittering if inside a container, because of the delayed position update in refreshInterval
  • bugfix: div resize event bubbled up to window

v1.1.2 (2014-09-16)

  • fixed a bug with the scrollTo method

v1.1.1 (2014-09-04)

  • Major update.

v1.0.9 (2014-08-19)

  • added new feature `ScrollMagic.scrollTo()`

v1.0.8 (2014-05-27)

  • Feature: add class for pinned element during pin

v1.0.7 (2014-04-15)

  • feature: ScrollScene.startOffset

v1.0.6 (2014-04-05)

  • fixed a bug concerning relative sizing of pinned elements

v1.0.5 (2014-03-24)

  • updates.

This awesome jQuery plugin is developed by janpaepke. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 09.10.2018
  • Source