Animate elements as they scroll into view.

# Introduction ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully you’ll be surprised below at how easy it is to pick up.
# Installation ## Browser A simple and fast way to get started is to include this script on your page: ```html ``` 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](https://unpkg.com) ## Module ```bash npm install scrollreveal ``` #### CommonJS ```js const ScrollReveal = require('scrollreveal') ``` #### ES2015 ```js import ScrollReveal from 'scrollreveal' ```
# Usage Installation provides us with the constructor function [`ScrollReveal()`](https://scrollrevealjs.org/api/constructor.html). 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()`](https://scrollrevealjs.org/api/reveal.html) method to create animation. Fundamentally, this is how to use ScrollReveal: ```html

Widget Inc.

``` ```js ScrollReveal().reveal('.headline') ``` **🔎 See this demo live on [JSBin](http://jsbin.com/jufohaxonu/edit?html,output)**
--- ### The full documentation can be found at [https://scrollrevealjs.org](https://scrollrevealjs.org) > If you’re using an older version of ScrollReveal, you can find legacy documentation in the [wiki](https://github.com/jlmakes/scrollreveal/wiki) ---

# License **For commercial sites, themes, projects, and applications, keep your source code private/proprietary by purchasing a [Commercial License](https://scrollrevealjs.org/pricing/).** Licensed under the GNU General Public License 3.0 for compatible open source projects and non-commercial use.
Copyright 2021 Fisssion LLC

	Stars	Issues	Version	Updated	Created
react-animate-on-scroll	557	39	2.1.9	19 days ago	7 years ago
react-reveal	2,725	93	1.2.2	6 years ago	8 years ago
scrollmagic	14,772	519	2.0.8	4 years ago	9 years ago
scrollreveal	22,155	39	4.0.9	3 years ago	9 years ago

react-animate-on-scroll vs react-reveal vs scrollmagic vs scrollreveal

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past