DOCSEARCHbyAlgolia
Submit Docs

ScrollReveal

repository·master·Indexed 12 days ago

https://github.com/jlmakes/scrollreveal

A lightweight JavaScript library used to animate HTML elements as they scroll into the viewport. Version 4.0.9 utilizes a singleton pattern to provide a consistent instance for calling the .reveal() method on CSS selectors.

Tokens
536
Snippets
5
Records
6
Agent score
48%

What's inside ScrollReveal

  1. How ScrollReveal works: The Singleton Pattern

    master
    ScrollReveal uses the singleton pattern. Calling the ScrollReveal() constructor function always returns the same instance, regardless of how many times it is called. This allows you to call the constructor anywhere in your application without worrying about creating multiple conflicting instances.

  2. Import ScrollReveal in CommonJS or ES2015

    master

    Depending on your module system, import the library as follows:

    CommonJS

    const ScrollReveal = require('scrollreveal')

    ES2015

    import ScrollReveal from 'scrollreveal'
    // CommonJS
const ScrollReveal = require('scrollreveal')

// ES2015
import ScrollReveal from 'scrollreveal'

  3. Install ScrollReveal via Browser

    master

    To use ScrollReveal directly in the browser without a build step, include the script via Unpkg. This creates a global ScrollReveal variable.

    Note: For production environments, it is recommended to specify a fixed version number to avoid loading delays caused by Unpkg resolving the latest version.

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

  5. Animate elements with reveal()

    master

    To create animations, call the ScrollReveal() constructor to get the instance, then use the .reveal() method. The .reveal() method accepts a CSS selector for the elements you want to animate as they scroll into view.

    Example:

    HTML:

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

    JavaScript:

    ScrollReveal().reveal('.headline')

  6. Initialize ScrollReveal with the default export

    master

    The scrollreveal package exports a Constructor function as its default export. Calling this function initializes the ScrollReveal instance. You can use this to create a new instance of the library to begin configuring reveal animations.

    import ScrollReveal from 'scrollreveal';

const sr = ScrollReveal();