Magical Scroll Interactions With Javascript Library | ScrollMagic

JavaScript Library For Magical Scroll is a JavaScript library for magic scroll interactions. Magic Scroll is a superior jQuery animation JS library that lets you do a lot of cool stuff when scrolling down/up to your net & cellular web page.

ScrollMagic helps you easily interact with the user’s current scroll position.

It’s the perfect library for you if you want…

  • Animate based on scroll position – either play an animation or synchronize it with a scrollbar movement (such as a play scrub control).
  • Pin an item starting from a specific scroll position – either indefinitely or for a limited amount of scrolling progression (sticky items).
  • Toggles CSS classes of elements on and off based on scroll position.
  • Effortlessly add parallax effects to your website.
  • Create an infinitely scrollable page (upload additional content).
  • Add callbacks at specific pass positions or while passing through a specific section, to pass a progress parameter.

Must Read – [15+] CSS Powered Animations On Scroll | scrollCue.js

Is ScrollMagic the Right Library for You?

ScrollMagic takes an object-oriented approach by using a controller for each scroll container and attaching multiple scenes that define what should happen in which part of the page. While this provides a great deal of control, it can be a bit confusing, especially if you’re just starting out with JavaScript.

If the above points are not important to you and you are just looking for a simple solution to implement CSS animations, I highly recommend taking a look at the great skrollr project. It almost depends on the attributes of the element and therefore requires little or no knowledge of JavaScript.

How to make use of it:

1. Install & download the ScrollMagic.

$ npm install scrollmagic  --save

2. Import the core JavaScript ScrollMagic.min.js and plugins of your selection.

<!-- Core -->
<script src="/path/to/ScrollMagic.min.js"></script>
<!-- Plugins -->
<script src="/path/to/plugins/animation.gsap.min.js"></script>
<script src="/path/to/plugins/animation.velocity.min.js"></script>
<script src="/path/to/plugins/debug.addIndicators.min.js"></script>
<script src="/path/to/plugins/jquery.ScrollMagic.min.js"></script>

3. Initialize the library on a controller component and outline scenes as follows.

var controller = new ScrollMagic.Controller(
    // optione here

var scene = new ScrollMagic.Scene()


4. Possible choices for the controller.

var controller = new ScrollMagic.Controller({

    // A selector, DOM object that references the primary container for scrolling.
    container: window,

    // Sets the scroll mode to vertical (`true`) or horizontal (`false`) scrolling.
    vertical: true,

    // These choices shall be handed to each Scene that's added to the controller utilizing the addScene methodology.
    globalSceneOptions: {},

    // Loglevel for debugging. Note that logging is disabled within the minified model of ScrollMagic.
    // `0` => silent
    // `1` => errors
    // `2` => errors, warnings
    // `3` => errors, warnings, debuginfo
    loglevel: 2,

    // Some modifications do not name occasions by default, like altering the container dimension or shifting a scene set off component.  
    // This interval polls these parameters to fireplace the mandatory occasions.  
    // If you do not use customized containers, set off parts or have static layouts, the place the positions of the set off parts do not change, you possibly can set this to Zero disable interval checking and enhance efficiency.
    refreshInterval: 100


5. Possible choices for the Scene.

var scene = new ScrollMagic.Scene()

6. API strategies.

// Add one ore extra scene(s) to the controller.  
// his is the equal to Scene.addTo(controller).
controller.addScene(new ScrollMagic.Scene());

// Remove one ore extra scene(s) from the controller.  
// This is the equal to Scene.remove().
controller.removeScene([scene, scene2, scene3]);

// Update one ore more scene(s) in accordance with the scroll place of the container.  
// This is the equal to Scene.replace().  
// The replace methodology calculates the scene's begin and finish place (primarily based on the set off component, set off hook, period and offset) and checks it in opposition to the present scroll place of the container.  
// It then updates the present scene state accordingly (or does nothing, if the state is already appropriate) – Pins shall be set to their appropriate place and tweens shall be up to date to their appropriate progress.  
// **Note:** This methodology will get referred to as consistently at any time when Controller detects a change. The solely software for you is for those who change one thing exterior of the realm of ScrollMagic, like shifting the set off or altering tween parameters._
controller.replaceScene(scene, true); // replace the controller instantly
controller.replaceScene([scene1, scene2, scene3]);

// Updates the controller params and calls replaceScene on each scene, that's connected to the controller.  
// In most circumstances you'll not want this perform, as it's referred to as consistently, at any time when ScrollMagic detects a state change occasion, like resize or scroll.  
// The solely software for this methodology is when ScrollMagic fails to detect these occasions.  
// One software is with some exterior scroll libraries (like iScroll) that transfer an inner container to a damaging offset as an alternative of really scrolling. In this case the replace on the controller must be referred to as at any time when the kid container's place modifications.
// For this case there can even be the necessity to present a customized perform to calculate the right scroll place. See `Controller.scrollPos()` for particulars.
controller.replace(true); // replace the controller instantly

// Scroll to a numeric scroll offset, a DOM component, the beginning of a scene or present an alternate methodology for scrolling.  
// For vertical controllers it is going to change the highest scroll offset and for horizontal purposes it is going to change the left offset.
controller.scrollTo(100, "my message");
controller.scrollTo(function (newScrollPos, callback) {
  // with callback

// **Get** the present scrollPosition or **Set** a brand new methodology to calculate it.  
// **GET**:
// When used as a getter this perform will return the present scroll place.  
// To get a cached worth use Controller.information("scrollPos"), which shall be up to date within the replace cycle.  
// For vertical controllers it is going to return the highest scroll offset and for horizontal purposes it is going to return the left offset.
// **SET**:
// When used as a setter this methodology prodes a solution to completely overwrite the controller's scroll place calculation.  
// A typical usecase is when the scroll place just isn't mirrored by the containers scrollTop or scrollLeft values, however for instance by the interior offset of a kid container.  
// Moving a baby container inside a mother or father is a generally used methodology for a number of scrolling frameworks, together with iScroll.  
// By offering an alternate calculation perform you can also make positive ScrollMagic receives the right scroll place.  
// Please additionally keep in mind that your perform ought to return y values for vertical scrolls an x for horizontals.
// get the present scroll Position
var scrollPos = controller.scrollPos();
// set a brand new scroll place calculation methodology
controller.scrollPos(perform () 
  return this.information("vertical") ? -mychildcontainer.y : -mychildcontainer.x

// Get all infos or one specifically in regards to the controller.
// returns the present scroll place (number)
var scrollPos = controller.information("scrollPos");
// returns all infos as an object
var infos =;

// **Get** or **Set** the present loglevel possibility value.
// get the present value
var loglevel = controller.loglevel();
// set a brand new value

// **Get** or **Set** the present enabled state of the controller.  
// get the present value
var enabled = controller.enabled();
// disable the controller

// Destroy the Controller, all Scenes and every little thing.
// with out resetting the scenes
controller = controller.destroy();
// with scene reset
controller = controller.destroy(true);

Must Read – Load More Content As User Scrolls To The Bottom of the Content | ev-scroll-loader

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 x and y direction scrolling (even both on one page)
  • support for scrolling inside div containers (even multiple on one page)
  • extensive debugging and logging capabilities
  • detailed documentation
  • many application examples

Awesome JavaScript Library For Magical Scroll Interactions, Magical Scroll Interactions, scroll reveal js

Read More – Javascript Get and Set Scroll Position Of Scrollable Content | ScrollStash

See Demo And Download

Official Website(janpaepke): Click Here

This superior jQuery/javascript plugin is developed by janpaepke. For extra Advanced Usages, please go to the official website.