⚠️ Warning: Do not use v2.0.0

A critical bug in version v2.0.0 prevents built-in animations from working correctly.
Please upgrade to v2.0.1 or later for a stable experience.
If you're referencing v2.0.0 in your documentation, consider updating to reference latest or v2.0.1 instead.

Installation

Browser

A simple and fast way to get started is to include this script on your page

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

This will create the global variable ScrollObserver

Module

$ npm install @charmingdc/scrolljs

CommonJs

const ScrollObserver = require('@charmingdc/scrolljs')

ES2015

import ScrollObserver from '@charmingdc/scrolljs'

Usage

Installation provides us with the constructor function ScrollObserver Calling this function returns the ScrollObserver instance, the “brain” behind the magic.

ScrollObserver employs the singleton pattern; no matter how many times the constructor is called, it will always return the same instance. This means we can call it anywhere, worry-free.

There’s a lot we can do with this instance, but most of the time we’ll be using the observer() method to create animation. Fundamentally, this is how to use ScrollObserver:

HTML

<div class='card'>
 Demo Card
</div>

CSS

.card {
  width: 4rem;
  height: 6rem;
  background-color: blue;
  border-radius: 1rem;
  transform: translateX(-1rem);
  transition: 200ms;
}

.fade-in {
  transform: translateX(0rem);
  transition: 200ms;
} /* Animation to display when element enters viewport */

JAVASCRIPT

const cards = document.querySelectorAll('.card');
ScrollObserver().observe(cards, null, 'fade-in')

or store the ScrollObserver instance to a variable

const observer = new ScrollObserver()
observer.observe(cards, null, 'fade-in');

Link to documentation

The full documentation can be found at:

https://scrolljs.vercel.app

ChangeLog

For a detailed list of changes please see: Changelog

License

Licensed under the MIT license for open source projects