Convert Figma logo to code with AI

janpaepke logoScrollMagic

The javascript library for magical scroll interactions.

14,895
2,168
14,895
518
View on GitHubView on NPM

Top Related Projects

garand's avatar

sticky

3,304

jQuery Plugin for Sticky Objects

michalsnik's avatar

aos

26,486

Animate on scroll library

alexfoxy's avatar

lax.js

10,405

Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.

mciastek's avatar

sal

3,593

🚀 Performance focused, lightweight scroll animation library 🚀

locomotivemtl's avatar

locomotive-scroll

7,869

🛤 Detection of elements in viewport & smooth scrolling with parallax.

Quick Overview

ScrollMagic is a JavaScript library for creating scroll-based animations and interactions on web pages. It allows developers to easily trigger animations, pin elements, and control the flow of content as users scroll through a webpage, enhancing the overall user experience and creating engaging, interactive storytelling.

Pros

  • Easy to use and integrate with existing projects
  • Highly flexible and customizable
  • Works well with popular animation libraries like GSAP
  • Supports both desktop and mobile browsers

Cons

  • Can be performance-intensive for complex animations on slower devices
  • Learning curve for advanced features and complex scenarios
  • Limited built-in animation capabilities (often requires additional libraries)
  • Some users report occasional issues with smooth scrolling

Code Examples

  1. Basic scene creation:
// Create a ScrollMagic controller
let controller = new ScrollMagic.Controller();

// Create a scene
let scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300
})
.setPin("#pin")
.addTo(controller);
  1. Triggering a GSAP animation:
// Create a GSAP animation
let tween = gsap.to("#animate", {opacity: 0, y: 100, duration: 0.5});

// Create a scene that triggers the animation
let scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    triggerHook: 0.5
})
.setTween(tween)
.addTo(controller);
  1. Using class toggle for simple effects:
// Create a scene that toggles a class
let scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    offset: 50
})
.setClassToggle("#target", "visible")
.addTo(controller);

Getting Started

To get started with ScrollMagic:

  1. Include the ScrollMagic library in your HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
  1. Create a controller in your JavaScript:
let controller = new ScrollMagic.Controller();
  1. Create scenes and add them to the controller:
let scene = new ScrollMagic.Scene({
    triggerElement: "#myTrigger",
    duration: 200
})
.setPin("#myElement")
.addTo(controller);

This basic setup allows you to start creating scroll-based interactions in your web projects.

Competitor Comparisons

garand logo

sticky

3,304

jQuery Plugin for Sticky Objects

Pros of Sticky

  • Lightweight and simple to use, focusing solely on making elements sticky
  • No dependencies, making it easy to integrate into various projects
  • Smaller file size, leading to faster load times

Cons of Sticky

  • Limited functionality compared to ScrollMagic's extensive features
  • Less flexibility for complex animations and scroll-based interactions
  • Fewer options for customization and advanced use cases

Code Comparison

ScrollMagic:

var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300
})
.setPin("#pin")
.addTo(controller);

Sticky:

var sticky = new Sticky('.sticky');
sticky.update();

ScrollMagic offers more complex scene-based animations, while Sticky provides a simpler API for making elements stick to the viewport. ScrollMagic's code demonstrates scene creation with trigger elements and duration, whereas Sticky's code shows a straightforward initialization and update process for sticky elements.

Both libraries serve different purposes: ScrollMagic is a comprehensive scroll interaction library, while Sticky focuses specifically on creating sticky elements. The choice between them depends on the project's requirements and complexity of desired scroll-based interactions.

michalsnik logo

aos

26,486

Animate on scroll library

Pros of AOS

  • Lightweight and easy to use, with minimal setup required
  • Supports a wide range of animation effects out of the box
  • Responsive and works well on mobile devices

Cons of AOS

  • Limited control over complex animations and timelines
  • Lacks advanced features for precise scroll-based animations
  • May not be suitable for highly customized or intricate scroll interactions

Code Comparison

AOS:

<div data-aos="fade-up" data-aos-duration="1000">
  <h1>Animated content</h1>
</div>

ScrollMagic:

var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
  triggerElement: "#trigger",
  duration: 300
}).setTween("#animate", 0.5, {backgroundColor: "green"}).addTo(controller);

AOS focuses on simplicity, using HTML attributes to define animations. ScrollMagic provides more granular control over animations through JavaScript, allowing for complex timelines and precise scroll-based triggers. While AOS is easier to implement for basic animations, ScrollMagic offers greater flexibility for advanced scroll interactions and custom animations.

alexfoxy logo

lax.js

10,405

Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.

Pros of lax.js

  • Lightweight and simple to use, with a smaller learning curve
  • Supports mobile-friendly touch events out of the box
  • Offers a wide range of pre-built animations and easing functions

Cons of lax.js

  • Less flexible for complex, custom animations compared to ScrollMagic
  • Limited documentation and community support
  • Fewer advanced features like pinning elements or defining custom triggers

Code Comparison

ScrollMagic:

var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300
})
.setTween("#animate", {scale: 2})
.addTo(controller);

lax.js:

lax.init();
lax.addDriver('scrollY', function() {
  return window.scrollY;
});
lax.addElements('#animate', {
  scrollY: {
    scale: [
      ['elInY', 'elCenterY', 'elOutY'],
      [1, 1.5, 2],
    ]
  }
});

Both libraries allow for scroll-based animations, but ScrollMagic offers more granular control over triggers and durations, while lax.js provides a more streamlined approach with pre-defined drivers and simpler syntax for common animations.

mciastek logo

sal

3,593

🚀 Performance focused, lightweight scroll animation library 🚀

Pros of sal

  • Lightweight and simple to use, with minimal setup required
  • No dependencies, making it easier to integrate into projects
  • Supports modern browsers and has good performance

Cons of sal

  • Limited features compared to ScrollMagic
  • Less flexibility for complex animations and scroll-based interactions
  • Smaller community and fewer resources available

Code Comparison

ScrollMagic:

var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300
})
.setTween("#animate", {scale: 2.5})
.addTo(controller);

sal:

sal({
    threshold: 0.5,
    once: false,
});

// HTML
<div data-sal="slide-up" data-sal-duration="300">
    Animated element
</div>

ScrollMagic offers more control over animations and scroll-based events, allowing for complex interactions and timelines. It requires more setup but provides greater flexibility.

sal focuses on simplicity, using data attributes for basic animations. It's easier to implement for simple scroll animations but lacks advanced features.

Both libraries serve different purposes: ScrollMagic for complex scroll-based interactions, and sal for quick and easy scroll animations with minimal code.

locomotivemtl logo

locomotive-scroll

7,869

🛤 Detection of elements in viewport & smooth scrolling with parallax.

Pros of Locomotive Scroll

  • Smoother scrolling experience with customizable easing and lerp
  • Built-in support for horizontal scrolling and mobile touch events
  • Smaller file size and better performance optimization

Cons of Locomotive Scroll

  • Less extensive documentation and community support
  • Fewer built-in animation options compared to ScrollMagic
  • May require more custom JavaScript for complex scroll-based animations

Code Comparison

ScrollMagic:

var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300
}).setTween("#animate", {scale: 2.5}).addTo(controller);

Locomotive Scroll:

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    lerp: 0.05
});
scroll.on('scroll', (obj) => {
    // Custom animation logic here
});

Both libraries offer ways to create scroll-based animations, but ScrollMagic provides more built-in options for complex animations, while Locomotive Scroll focuses on smooth scrolling and requires more custom JavaScript for advanced effects. ScrollMagic uses a scene-based approach, whereas Locomotive Scroll relies on event listeners and custom logic for animations.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

ScrollMagic v2.0.8 Build Status

The javascript library for magical scroll interactions.

Donate

Quicklinks: About | Download | Installation | Usage | Help | Compatibility | Author | License | Thanks

🚨 ScrollMagic 3.0 is on the horizon. Helpers & Testers wanted! 🚨

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.

Check out the demo page, browse the examples or read the documentation to get started.
If you want to contribute please get in touch and let me know about your specialty and experience.

About the Library

ScrollMagic is a scroll interaction library.

It's a complete rewrite of its predecessor Superscrollorama by John Polacek.
A plugin-based architecture offers easy customizability and extendability.

To implement animations, ScrollMagic can work with multiple frameworks. The recommended solution is the Greensock Animation Platform (GSAP) due to its stability and feature richness. For a more lightweight approach, the VelocityJS framework is also supported. Alternatively, custom extensions can be implemented or the necessity of a framework can be completely avoided by animating simply using CSS and class toggles.

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

Is ScrollMagic the right library for you?
ScrollMagic takes an object-oriented approach using a controller for each scroll container and attaching multiple scenes defining what should happen at what part of the page. While this offers a great deal of control, it might be a little confusing, especially if you're just starting out with javascript.
If the above points are not crucial for you and you are just looking for a simple solution to implement css animations I would strongly recommend taking a look at the awesome skrollr project. It almost solely relies on element attributes and thus requires minimal to no javascript knowledge.

Availability

To get your copy of ScrollMagic you have the choice between four options:

Option 1: GitHub
Download a zip file containing the source code, demo page, all examples and documentation from the GitHub releases page or clone the package to your machine using the git command line interface:

git clone https://github.com/janpaepke/ScrollMagic.git

Option 2: Bower
ScrollMagic is also available on bower and will only install the necessary source code, ignoring all example and documentation files.
Please mind that since they are not core dependencies, you will have to add frameworks like GSAP, jQuery or Velocity manually, should you choose to use them.

bower install scrollmagic

Option 3: npm
If you prefer the node package manager, feel free to use it.
Keep in mind that like with bower non-crucial files will be ignored (see above).

npm install scrollmagic

Option 4: CDN
If you don't want to host ScrollMagic yourself, you can include it from cdnjs:

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js

All plugins and uncompressed files are also available on cdnjs.
For example:

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js

Installation

Include the core library in your HTML file:

<script src="js/scrollmagic/uncompressed/ScrollMagic.js"></script>

And you're ready to go!
For deployment use the minified version instead:

<script src="js/scrollmagic/minified/ScrollMagic.min.js"></script>

NOTE: The logging feature is removed in the minified version due to file size considerations.

To use plugins like the indicators visualization, simply include them in addition to the main library:

<script src="js/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>

To learn how to configure RequireJS, when using AMD, please read here.

Usage

The basic ScrollMagic design pattern is one controller, which has one or more scenes attached to it.
Each scene is used to define what happens when the container is scrolled to a specific offset.

Here's a basic workflow example:

// init controller
var controller = new ScrollMagic.Controller();

// create a scene
new ScrollMagic.Scene({
	duration: 100, // the scene should last for a scroll distance of 100px
	offset: 50, // start this scene after scrolling for 50px
})
	.setPin('#my-sticky-element') // pins the element for the the scene's duration
	.addTo(controller); // assign the scene to the controller

To learn more about the ScrollMagic code structure, please read here.

Help

To get started, check out the available learning resources in the wiki section.
Be sure to have a look at the examples to get source code pointers and make use of the documentation for a complete reference.

If you run into trouble using ScrollMagic please follow the Troubleshooting guide.

Please do not post support requests in the github issue section, as it's reserved for issue and bug reporting. If all the above options for self-help fail, please use Stack Overflow or the ScrollMagic Premium Support.

Browser Support

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

About the Author

I am a creative coder based in Vienna, Austria.

Learn more on my website or Follow me on Twitter

License

ScrollMagic is dual licensed under the MIT license and GPL.
For more information click here.

Thanks

This library was made possible by many people who have supported it with passion, donations, or advice. Special thanks go out to John Polacek, Jack Doyle, Paul Irish, Nicholas Cerminara, Kai Dorschner, Petr Tichy and Dennis Gaebel.

NPM DownloadsLast 30 Days