ScrollMagic JS

Integrates ScrollMagic, The JavaScript library for magical scroll interactions. ScrollMagic.js helps you to easily react to the user's current scroll position.

Features

- 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

Installation

Please view the project's README.md for detailed installation instruction.

Requirements

No requirement.

Similar projects

• ScrollReveal JS
  Integrates ScrollReveal.js, is a JavaScript library for easily animating elements as they enter/leave the viewport.
• Scrollama JS
  Integrates Scrollama.js, is a modern & lightweight JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.
• WOW JS
  Provides Animations When You Scroll, Improve site interactivity with awesome animations.
• AOS JS
  Is a small and lightweight JavaScript library (with no dependencies) that allows you to animate elements as you scroll down, and up. If you scroll back to the top, elements will animate to their previous state and are ready to animate again if you scroll down.
• AnimateCSS On Scroll ( Animate CSS + AOS JS )
  Provides AOS options on AnimateCSS UI add animation form, allows you to Animate On Scroll using AOS.js library.

Supporting this Module

Please let me know if a new feature is needed or is there any issue and feedback. You can announce it in the ScrollMagic Issues section.

Documentation

Please check Official ScrollMagic.js Documentation for more information.

Recommended modules

• Animate CSS
  Allows you to makes cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, blocks with cool animation effects.
• Textimate ( Text + Animate )
  Provides text animation, enhancing site interactivity with awesome effects. Effortlessly transform static text into mesmerizing animations.
• Splitting.js
  Allows you to creates elements and adds CSS Variables for split words & characters! (lines, items, grids, images, more!) to unlock amazing possibilities for style and animating text, grids, and more!.
• Vivus
  is a module that aims to integrate Vivus.js library with Drupal. Provides SVG animate, Improve site interactivity with awesome animations.
• Scene
  is a JavaScript and CSS timeline-based animation library for creating animated websites.
• Anime
  The Anime is a module that aims to integrate Anime.js library with Drupal. Provides JavaScript animation engine, Improve site interactivity with awesome animations.

Browser Support

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