Animate elements as they scroll into view

samuel Animation 520 , , , , , ,



Animate elements as they scroll into view.

Build status Monthly downloads Version 5.6 kB min+gzip GPLv3 License

Browser compatibility matrix


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

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 2018 Fisssion LLC

Related Post

An ajax powered page transition, with a slide-in content animation triggered by a side tabbed navigation.We’ve been experimenting lately with Read more

A CSS powered animation, that replaces the refresh of the page while the content is updated using Ajax.We used the Read more

Zebra_Tooltips is a lightweight jQuery tooltip plugin for creating simple, smart and visually attractive tooltips with nice transitions and configuration options. Read more

Slice Slider is a little slicey transition slider using a simple add class deal. Supports scrollwheel (scroll jacking), nav buttons Read more

Pogo Slider is a jQuery plugin that allows you to create animated image/content sliders. CSS animations are used to transition Read more

jQuery Hero Slider Plugin is a light-weight and easy to install. It is responsive, powerful, and customizable. It has different Read more

Zenith is responsive slider jQuery plugin that has 4 basic layouts + 4-th layout has dozen variations of it’s own, Read more

humane.js is a simple, modern, framework-independent, well-tested, unobtrusive, notification system. Utilizes CSS transitions when available, falls back to JS animation Read more