Animate elements as they scroll into view

Downloads in past


21,412254.0.92 years ago8 years agoMinified + gzip package size for scrollreveal in KB


<a href="" title="Visit ScrollReveal home page">
	<img src="" alt="ScrollReveal" width="120">

<a href="" title="Visit ScrollReveal home page">
	<img width="200" src="" alt="ScrollReveal">

Animate elements as they scroll into view.

<a href="">
	<img src="" alt="Build status">
<a href="">
	<img src="" alt="Monthly downloads">
<a href="">
	<img src="" alt="Version">
<img src="" alt="5.7 kB min+gzip">
<a href="">
	<img src="" alt="GPLv3 License">

<a href="">
	<img src="" alt="Browser compatibility matrix" width="100%">

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.



A simple and fast way to get started is to include this script on your page:
<script src=""></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


npm install scrollreveal


const ScrollReveal = require('scrollreveal')


import ScrollReveal from 'scrollreveal'

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.


🔎 See this demo live on JSBin

The full documentation can be found at

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

<img align="right" height="300" src="" alt="Commercial License Badge">

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.

Copyright 2021 Fisssion LLC