ScrollJs: Custom Scroll Animations and Lazy Loading

Preview:

Description:

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. Insert the ScrollJs JavaScript library in your HTML document:

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

2. 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',
});

3. 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 */
}

4. 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.

5. Unobserve & Disconnect:

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

Changelog:

01/12/2025

• Bugfix