Skip to main content

Installation

To start using ScrollJs, you have two easy options:

  • Install it via a package manager
  • Use a CDN link directly in your HTML file

1. Install via Package Manager​

Make sure you have Node.js installed on your system.

Then, open your terminal and run:

npm install @charmingdc/scrolljs
Important Notice: Do Not Use v2.0.0

Version 2.0.0 contains a critical bug that breaks built-in CSS animations and has been deprecated.
Whether you're installing via a package manager or using a CDN, make sure to use version 2.0.1 or later to ensure proper functionality.

Once installed, ScrollJs is ready to use in your project.

2. Use via CDN​

You don’t need to install anything — just add one of the following <script> tags to your HTML file.

Choose between two file formats:

<script src="https://cdn.jsdelivr.net/npm/@charmingdc/scrolljs@2.0.1/dist/scroll.esm.min.js" type="module"></script>

Optional Fallback: For broader browser support, you can add both formats conditionally:

<script type="module" src="https://cdn.jsdelivr.net/npm/@charmingdc/scrolljs@2.0.1/dist/scroll.esm.min.js"></script>

<script nomodule src="https://cdn.jsdelivr.net/npm/@charmingdc/scrolljs@2.0.1/dist/scroll.umd.min.js"></script>
info

You can replace 2.0.1 with your preferred version. Check the CHANGELOG.md for version updates.

Option B: From GitHub (Latest on main branch)​

Loads the latest build directly from GitHub:

<script src="https://cdn.jsdelivr.net/gh/Charmingdc/ScrollJs@main/scroll.min.js"></script>
Tip

Use the versioned link (Option A) in production for better stability.

CDN Usage Note

After adding the script tag, ScrollJs class: ScrollObserver will be available globally in your HTML project. If using the UMD file, it may be available as window.ScrollObserver.

What’s next? 🚀 Learn how to initialize ScrollJs in your project.