ScrollReveal Deployment and Usage Guide

Prerequisites

Runtime: Modern web browser (ScrollReveal is not supported on older browsers)
Development Tools: Node.js and npm (for module installation)
Basic Knowledge: HTML, CSS, and JavaScript

Installation

Browser Installation

The quickest way to get started is by including the script directly in your HTML:

<script src="https://unpkg.com/scrollreveal"></script>

This creates the global ScrollReveal variable. Note: For production use, specify a fixed version number to prevent delays from Unpkg resolving the latest version.

Module Installation

For a more robust setup, install via npm:

$ npm install scrollreveal

CommonJS Usage

const ScrollReveal = require('scrollreveal')

ES2015+ Usage

import ScrollReveal from 'scrollreveal'

Configuration

ScrollReveal doesn't require complex configuration files or API keys. The library is designed to work out of the box with sensible defaults.

Basic Configuration

You can customize the behavior by passing options to the constructor:

ScrollReveal({
  container: '#container', // CSS selector for container element
  mobile: true,            // Enable animations on mobile devices
  desktop: true,           // Enable animations on desktop devices
  reset: false,            // Reset elements when they leave the viewport
  useDelay: 'always',      // Delay strategy: 'always', 'once', or 'onload'
  viewFactor: 0.2,         // Percentage of element visible before animation triggers
  viewOffset: {            // Offset for triggering animations
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  }
})

Build & Run

Local Development

Include the library in your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ScrollReveal Demo</title>
    <script src="https://unpkg.com/scrollreveal"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: #3498db;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        ScrollReveal().reveal('.box');
    </script>
</body>
</html>

Open the HTML file in your browser to see the animation.

Production Build

When using the module system, ensure you bundle your application properly:

# Build with webpack, rollup, or similar bundler
npm run build

Deployment

ScrollReveal is a client-side JavaScript library, so deployment is straightforward:

Static Hosting Platforms

Vercel: Perfect for static sites with ScrollReveal animations
Netlify: Easy deployment for HTML/CSS/JS projects
GitHub Pages: Free hosting for documentation and demos

Traditional Hosting

Apache/Nginx: Serve your HTML files with the ScrollReveal script included
Cloud Storage: AWS S3, Google Cloud Storage, or Azure Blob Storage

Framework Integration

Next.js: Import and use ScrollReveal in your React components
Gatsby: Include ScrollReveal in your Gatsby project
Vue.js: Use with Vue components for enhanced scroll animations

Troubleshooting

Common Issues and Solutions

1. Animations Not Working

Problem: Elements aren't animating on scroll.

Solutions:

Check browser console for errors
Ensure elements are in the DOM before calling reveal()
Verify the selector matches your elements
Check if the element is hidden by CSS (display: none or visibility: hidden)

// Ensure DOM is ready
document.addEventListener('DOMContentLoaded', function() {
  ScrollReveal().reveal('.my-element');
});

2. Mobile Animations Disabled

Problem: Animations work on desktop but not mobile.

Solution: Check your configuration:

ScrollReveal({
  mobile: true // Ensure mobile animations are enabled
});

3. Container Issues

Problem: Elements outside the specified container aren't animating.

Solution: Verify your container selector:

ScrollReveal({
  container: '#my-container' // Must match an existing element
});

4. Version Conflicts

Problem: Using different versions of ScrollReveal in the same project.

Solution: Standardize on one installation method:

# Remove existing installation
npm uninstall scrollreveal

# Reinstall with specific version
npm install scrollreveal@4.0.0

5. Performance Issues

Problem: Page scrolls slowly with many animations.