ScrollCue.js

A lightweight JavaScript scroll animation library using the Intersection Observer API. ScrollCue.js animates elements when they enter the viewport, with configurable animations, delays, and durations.

Features

• Dependency-free (no jQuery required)
• Lightweight (<5KB minified)
• Uses modern Intersection Observer API
• Multiple animation types
• Customizable timing and easing
• Simple implementation
• Works automatically when included (like particles.js)
• Can be used directly from CDN - no downloads needed
• One-line implementation available (JS + CSS together)

Installation

One-Line Implementation (Recommended)

The simplest way to use ScrollCue.js is with the all-in-one version that includes both JS and CSS in a single file:

<!-- Just one line! No CSS file needed! -->
<script src="https://cdn.jsdelivr.net/gh/username/ScrollCue.js@latest/scrollcue.all-in-one.min.js"></script>

Replace username with your actual GitHub username once you've uploaded the project.

Standard CDN Implementation

Alternatively, you can use the separate JS and CSS files:

<script src="https://cdn.jsdelivr.net/gh/username/ScrollCue.js@latest/scrollcue.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/username/ScrollCue.js@latest/scrollcue.min.css">

Direct Download

Or download the files from this repository and include them in your project:

<link rel="stylesheet" href="path/to/scrollcue.css">
<script src="path/to/scrollcue.js"></script>

That's it! No initialization code needed. ScrollCue.js automatically detects elements with the scrollcue class and sets up animations when the page loads.

Usage

1. Add the scrollcue class to any element you want to animate when scrolled into view.
2. Add a data-cue attribute to specify the animation type.
3. Optionally add data-delay and data-duration attributes for timing control.

<div class="scrollcue" data-cue="fade-in">
  This element will fade in when scrolled into view.
</div>

<div class="scrollcue" data-cue="slide-up" data-delay="200" data-duration="1000">
  This element will slide up with a 200ms delay and 1000ms duration.
</div>

Available Animations

• fade-in: Simple fade-in effect
• slide-up: Slides up from below
• slide-down: Slides down from above
• slide-left: Slides in from the right
• slide-right: Slides in from the left
• zoom-in: Scales up from smaller size
• zoom-out: Scales down from larger size
• rotate-in: Rotates and fades in
• flip-in: Flips in with 3D effect

JavaScript API

ScrollCue.js initializes automatically when included - no manual initialization required. However, you can control it with JavaScript if needed:

// Access the global instance
window.scrollCue

// Manual refresh to detect new elements
scrollCue.refresh();

// Destroy instance
scrollCue.destroy();

// Create a new instance with custom options
const myScrollCue = new ScrollCue({
  rootMargin: '0px',
  threshold: 0.2,
  duration: 800,
  delay: 0,
  easing: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)',
  once: true
});
myScrollCue.init();

Options

Browser Support

ScrollCue.js works in all modern browsers that support the Intersection Observer API (Chrome, Firefox, Safari, Edge). A fallback is provided for older browsers, which will simply display all elements without animation.

License

MIT License

Contributing

If you're interested in contributing to ScrollCue.js, please check out the CONTRIBUTING.md file for guidelines.

Important: Don't edit the all-in-one files directly. Make changes to the separate scrollcue.js and scrollcue.css files, then generate the combined version as described in the contributing guide.