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.

Magical Scroll Javascript Library Details

Post Namescrollmagic
Author Namejanpaepke
CategoryAnimation Plugins, Scrolling
Official PageClick Here
Publish DateAugust 16, 2020
Last UpdateAugust 14, 2023
DownloadLink Below

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 this great skrollr project. It almost depends on the attributes of the element and therefore requires little or no knowledge of JavaScript.

ScrollMagic was developed with these principles in mind:

  • optimized performance
  • lightweight (6KB gzipped)
  • flexibility and extensibility
  • 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

Browser Support

ScrollMagic aims to support all major browsers even in older versions:
Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+

Must Read: A jQuery Plugin That Scrolls Elements Infinitely | infiniteSlide

How to make use of it:

1. Install & download the ScrollMagic.

$ npm install scrollmagic  --save

2. Import the 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 options 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. options for the Scene.

var scene = new ScrollMagic.Scene()

6. API.

// 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);

See Demo And Download


Official Website(janpaepke): Click Here

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

Related Posts


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

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