back to home

jlmakes / scrollreveal

Animate elements as they scroll into view.

22,528 stars
2,223 forks
40 issues
JavaScript
Chat with CodebaseArchitecture ScanSecurity AuditExplain Codebase

AI Architecture Analysis

This repository is indexed by RepoMind. By analyzing jlmakes/scrollreveal in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.

Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.

Click here to launch the interactive analysis workspace

Embed this Badge

Showcase RepoMind's analysis directly in your repository's README.

[![Analyzed by RepoMind](https://img.shields.io/badge/Analyzed%20by-RepoMind-4F46E5?style=for-the-badge)](https://repomind-ai.vercel.app/repo/jlmakes/scrollreveal)
Preview:Analyzed by RepoMind

Repository Summary (README)

Preview
<p align="center"> <a href="https://scrollrevealjs.org" title="Visit ScrollReveal home page"> <img src="https://scrollrevealjs.org/img/logomark.svg" alt="ScrollReveal" width="120"> </a> </p> <br> <p align="center"> <a href="https://scrollrevealjs.org" title="Visit ScrollReveal home page"> <img width="200" src="https://scrollrevealjs.org/img/scrollreveal-logotype-dark.svg" alt="ScrollReveal"> </a> </p> <p align="center">Animate elements as they scroll into view.</p> <p align="center"> <a href="https://travis-ci.org/jlmakes/scrollreveal"> <img src="https://img.shields.io/travis/jlmakes/scrollreveal.svg" alt="Build status"> </a> <a href="https://www.npmjs.com/package/scrollreveal"> <img src="https://img.shields.io/npm/dm/scrollreveal.svg" alt="Monthly downloads"> </a> <a href="https://www.npmjs.com/package/scrollreveal"> <img src="https://img.shields.io/npm/v/scrollreveal.svg" alt="Version"> </a> <img src="https://img.shields.io/badge/min+gzip-5.7_kB-blue.svg" alt="5.7 kB min+gzip"> <a href="https://opensource.org/licenses/GPL-3.0"> <img src="https://img.shields.io/badge/license-GPLv3-blue.svg" alt="GPLv3 License"> </a> </p> <br>

Installation

Browser

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

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

This will create the global variable ScrollReveal

Be careful using this method in production. Without specifying a fixed version number, Unpkg may delay your page load while it resolves the latest version. Learn more at unpkg.com

Module

$ npm install scrollreveal

CommonJS

const ScrollReveal = require('scrollreveal')

ES2015

import ScrollReveal from 'scrollreveal'
<br>

Usage

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

ScrollReveal 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 reveal() method to create animation. Fundamentally, this is how to use ScrollReveal:

<h1 class="headline">
	Widget Inc.
</h1>

ScrollReveal().reveal('.headline')

🔎 See this demo live on JSBin

<br>

The full documentation can be found at https://scrollrevealjs.org

If you’re using an older version of ScrollReveal, you can find legacy documentation in the wiki

<br> <a href="https://scrollrevealjs.org/pricing/" title="Visit ScrollReveal pricing page"> <img align="right" height="300" src="https://scrollrevealjs.org/img/license.svg" alt="Commercial License Badge"> </a> <br>

License

For commercial sites, themes, projects, and applications, keep your source code private/proprietary by purchasing a Commercial License.

Licensed under the GNU General Public License 3.0 for compatible open source projects and non-commercial use.

<br>

Copyright 2023 Fisssion LLC