JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Scroll Reveal.js

    Declarative on-scroll reveal animations.
    Filed under 

    • 🔾85%Overall
    • 16,761
    • 3.4 days
    • 🕩1966
    • 👥4

    ScrollReveal


    ScrollReveal

    Animate elements as they scroll into view.

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

    Browser compatibility matrix



    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:

    <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'
    


    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



    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



    Commercial License Badge


    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.


    Copyright 2018 Fisssion LLC

    Show All