ScrollJs: Custom Scroll Animations and Lazy Loading

ScrollJs is a JavaScript library for creating scroll-triggered animations and lazy loading images.

It gives you full control over animation styles and works with existing CSS classes or third-party animation libraries like Animate.css.

ScrollJs works by using the Intersection Observer API to detect when elements enter or leave the viewport. This implementation allows for flexible, performant scroll-based animations and actions, with options for one-time or repeated triggers as elements enter and leave the viewport.

How to use it:

1. Install and import ScrollJs into your project.

# NPM
$ npm install @charmingdc/scrolljs

// ES
import ScrollObserver from '@charmingdc/scrolljs'

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

2. Or insert the ScrollJs JavaScript library in your HTML document:

<script src="/path/to/scroll.min. js"></script>

3. Initialize ScrollObserver. The animateOnce parameter determines if animations trigger once or repeatedly. The options object allows customization of the Intersection Observer API settings.

• root: Specifies a custom container as the viewport (default: the browser viewport).
• threshold: Determines how much of an element must be visible to trigger the animation (0-1, default: 0).
• rootMargin: Adjusts the viewport’s dimensions (e.g., ‘-10px’ shrinks the viewport by 10px on all sides).

const observer = new ScrollObserver(false, {
  root: rootDiv,
  threshold: 0.8,
  rootMargin: '-10px',
});

4. Use the .observe() method to trigger animations when the target element is scrolled into view.

• The first argument is the element to observe.
• The second argument is an optional callback function (explained below).
• The third argument is the CSS class containing your animation.

observer.observe(myElement, null, 'myAnimation');

.myAnimation {
  /* Your CSS animation properties */
}

5. You can also use .observe() with a callback function to lazy load images.

observer.observe(image, (img) => {
img.src = img.dataset.src;}, 'visible');

This sets the image src attribute when the image becomes visible, using a placeholder data-src attribute in your HTML.

6. Unobserve & Disconnect:

// Stops observing a specific element.
observer.unobserve(element):

// Stops observing all elements.
observer.disconnect():

Changelog:

05/03/2025

• v2.0.0: Inbuilt CSS Support Added

The post ScrollJs: Custom Scroll Animations and Lazy Loading appeared first on CSS Script.