Animate elements as they scroll into view.

Related tags

Scroll javascript css animation scroll transition reveal transform scrollreveal
Overview

ScrollReveal


ScrollReveal

Animate elements as they scroll into view.

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


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

Comments
  • Animation just won't start.

    Animation just won't start.

    Hello, First, thanks for the awesome project and the chance to use it! But now on the question.

    I'm trying to use it on an image, but it just won't trigger the animation. In my web page, the image is still there but invisible. Here is part of my code:

    <img class="tags" src="tags.png" alt="HTML Tags Example">

    window.sr = new ScrollReveal()
sr.reveal('.tags', { origin: 'bottom', distance: '20px', duration: 2000, })

    Where could my problem be? I've just started learning JS, so the thing could be silly mistakes, but couldn't fix it on myself. Thank you in advance!

    Question 
    opened by pepo972 29
  • Using Scroll Reveal in a React Component

    Using Scroll Reveal in a React Component

    Been attempting to use ScrollReveal in a react component, everything seems to be working except ScrollReveal isn't being triggered on scrolling, but re-sizing the window in order to hide the elements.

    Question Third Party 
    opened by joshleong 22
  • After reveals, extra blank area is added to right of body

    After reveals, extra blank area is added to right of body

    This is quite strange, especially for such an awesome plugin.

    I have three boxes that reveal. When they're done, an un-inspectable area appears to the right of the page, enforcing a horizontal scroll bar. I say un-inspectable, because if you try to inspect the area that's been added, it inspects the <html> tag instead.

    What's even weirder is that this only occurs when I am navigating to and from the page on question. However, if I press F5 on this page, it doesn't add the empty space.

    Here's an image:

    scrollreveal

    Note: This only seems to happen in WebKit (or Blink) browsers. Firefox and IE run everything perfectly — and interestingly enough, this plugin (very similar to scrollReveal) does exactly the same thing!

    Duplicate 
    opened by mikerockett 15
  • Revealing large images causes odd behavior?

    Revealing large images causes odd behavior?

    Hey I'm using scroll reveal v4 at this website http://camilomancilla.com.co/AGR.html but without reason stopped working, when scroll down shows the items for a while but then the items hide again as quick as I keep scrolling down, I've been searching about this bug but there isn't any case about this... Help me!!!

    Environment

    • Operating System: Mac OS
    • Browser Version: Chrome 69.0.3497.100
    • ScrollReveal Version: v4

    scroll reveal bug

    Question 
    opened by camsarmiento 14
  • Reveal from bottom on scroll down and from top on scroll up

    Reveal from bottom on scroll down and from top on scroll up

    Is it possible? I have been fiddling but can't find a way to do it. I am guessing origin or distance would have to be reversed depending on scroll direction? Please let me know... and thanks so much for the great work put into this!

    Question 
    opened by antoniocosta 14
  • JavaScript API

    JavaScript API

    Hey Julian,

    This project looks great, just curious if you are planning on also including a javascript API for those of us who like to keep html and js separate?

    Feature Request 
    opened by jescalan 13
  • Uncaught TypeError: afterCallback is not a function

    Uncaught TypeError: afterCallback is not a function

    • Operating System: Windows 10
    • Browser Version: Chrome Version 68.0.3440.106
    • ScrollReveal Version: 4.0.0
    Uncaught TypeError: afterCallback is not a function
    at scrollreveal.js:876: 

    function registerCallbacks(element, isDelayed) {
	var afterCallback = element.revealed
		? element.config.afterReveal
		: element.config.afterReset;
	afterCallback(element.node); // <--???
    Question 
    opened by twister65 12
  • Elements within the viewport, are not revealing on load.

    Elements within the viewport, are not revealing on load.

    I have a page setup with reveals - and I have some objects that are visible right from the start, but they don't animate before I scroll the page, which – I know :) – of course is kinda the idea, but I'd hate to have to recreate the same exact animations that scrollReveal.js provides, just because these elements are visible right away, and I can't seem to trigger their reveals after the page has loaded.

    Is there some way to do this through the sr object? I've tried looking for it in the source, but I haven't had any success in finding a method that seems to do the job...

    Won't Fix 
    opened by greystate 12
  • Using ScrollReveal with Angular

    Using ScrollReveal with Angular

    So, I have been trying to use the script along with angular. The partials(views) that get called in the "ng-view" div, can't animate,because the app has already been bootstraped.

    I have tried several things to make js code run after a view is called, and it executes, but the ScrollReveal code doesn't. Is there some kind of conflict if it's used in a partial file?

    Thank you.

    Question Third Party 
    opened by pavlos-io 12
  • Origin Reveal Option doesn't works?

    Origin Reveal Option doesn't works?

    Environment

    • Operating System: Windows 10 pro x64 v 1803
    • Browser Version: Opera v55.0.2994.61
    • ScrollReveal Version: release 4.0.4 using cdn

    Hello, after a while I come back with another issue, I'm trying to display a page on github pages using your amazing script, it works to a certain extent, the problem is that the "origin" option does not apply the effects it should, possibly I'm doing something wrong but I've tried several times with different options like local scripts, changing styles and events, but it does not work, another minor thing is that by following your recommendations to avoid flickering in the load of the page if the css visibility option is hidden it is added !important like visibility: hidden !important; will not work the reveal, it is something uncomfortable sometimes, attached screenshots the my javascript script

    This is the file that executes the reveals, the commented options disable them to verify that they were not the cause of the problem, but it does not matter if they are active or inactive

    image

    This other screenshot shows the structure of my index.html file, I use all the scripts in the head section image

    And this one is the CSS styles file that I use with the recommendations of your script and without the property: !Important image

    Even if you want to verify the files yourself you can check the docs folder of my repository, which is published in the github pages

    Keep up the good work friend, I have made this script one of the essential elements when creating web pages.

    Question 
    opened by D4RKAR117 11
  • Adding second event listener breaks scroll reveal

    Adding second event listener breaks scroll reveal

    Hey Julian,

    I'm using ScrollReveal and have it working great, until I add a second scroll event listener: window.addEventListener('scroll', (event) => { ... });

    It looks like this new event listener is breaking ScrollReveal somehow. This is the error message I'm getting:

    Uncaught TypeError: Cannot read property 'bounds' of undefined
    at ScrollReveal.isElementVisible (scrollreveal.js:1340)
    at scrollreveal.js:1398
    at scrollreveal.js:181
    Needs Demo 
    opened by coopersamuel 11
  • (Question) Different Options on Subsequent Reveals

    (Question) Different Options on Subsequent Reveals

    Is there a way to change options after x amount of reveals for elements that have reset: true enabled?

    For instance, I want the first time an element is revealed to have 500ms of delay, and all subsequent reveals of the same element to have 100ms of delay (reset is set to true of course). How might I achieve this?

    Quite new to JS so apologies if the answer is fairly obvious.

    opened by liamc1011 0
  • Handling mid-page loads

    Handling mid-page loads

    I've noticed when my page loads at a certain scroll location, like via fragment or when the user uses back button to come back to the page at their last position, that section does not trigger a reveal. Also all folds above it are not revealed.

    This causes confusion when the user must scroll in order to trigger reveals up or down. Is there a configuration option or recommended way to alleviate this UX?

    I noticed issue 384 would be a brilliant solution to this problem, if we could apply scroll-directional reveals.

    opened by BenRacicot 0
  • ScrollReveal gets more and more delayed as you scroll

    ScrollReveal gets more and more delayed as you scroll

    ScrollReveal gets more and more delayed as you scroll down the page. It wasnt a problem and as the page became longer, entire sections started becoming blank. Eg: Zapscale dot com/blog Same issue is noted by SO user; https://stackoverflow.com/questions/72094725/scrollreveal-gets-more-and-more-delayed-as-you-scroll

    Environment

    • Operating System: Windows 11
    • Browser Version: 101.0.4951.67
    • ScrollReveal Version: 4.0.9
    opened by akshayknz 0
  • Sveltekit: scrollreveal not working

    Sveltekit: scrollreveal not working

    Hi,

    I've been trying to use scrollreveal in the context of Sveltekit. It's not working however. The ScrollReveal object looks good to me - elements with the associated classes are present, computed styling etc. seem correct - however the inline-styles are not being applied.

    Any idea why that is? I've tried using it via CDN as well as installing the package with npm.

    Thanks and cheers

    Third Party 
    opened by sc00 0
  • refactor: replace deprecated String.prototype.substr()

    refactor: replace deprecated String.prototype.substr()

    String.prototype.substr() is deprecated so we replace it with String.prototype.slice() which works similarily but isn't deprecated. .substr() probably isn't going away anytime soon but the change is trivial so it doesn't hurt to do it.

    Enhancement 
    opened by CommanderRoot 1
Owner
Julian Lloyd
Human-Computer Magician
Julian Lloyd
GitHub https://scrollrevealjs.org/
A simple and fast API to monitor elements as you scroll

scrollMonitor The scroll monitor allows you to receive events when elements enter or exit a viewport. It does this using watcher objects, which watch

Stu Kabakoff 3.3k Jan 4, 2023
Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin

#One Page Scroll 1.3.1 by Pete R. Create an Apple-like one page scroll website (iPhone 5S website) with One Page Scroll plugin Created by Pete R., Fou

Pete R. 9.6k Dec 31, 2022
Smooth WebGL Shader Transformations on Scroll

Rock the Stage with a Smooth WebGL Shader Transformation on Scroll A handy setup to create a smooth scroll based GLSL animation using Three.js and GSA

Faboolea 97 Dec 25, 2022
Largetable - jQuery plugin to scroll in/maximize large tables

largetable jQuery plugin to scroll in/maximize large tables Usage Install with npm: $ npm install largetable Then include largetable files in the HTM

Edinum 1 Feb 3, 2021
🚀 Performance focused, lightweight scroll animation library 🚀

Sal Performance focused, lightweight (less than 2.8 kb) scroll animation library, written in vanilla JavaScript. No dependencies! Sal (Scroll Animatio

Mirek Ciastek 3.4k Dec 28, 2022
Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.

lax.js Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll. >> DEMO << What's new w

Alex Fox 9.4k Dec 29, 2022
▲ NEXT.JS - Example project using Next.js with Locomotive Scroll. (experimental)

nextjs-with-locomotive-scroll-example ?? NEXT.JS - Example project using Next.js with Locomotive Scroll. (experimental) ?? Demo ?? Getting started The

Bruno Silva 27 Dec 21, 2022
Better scroll event management using requestAnimationFrame.

Scroll Frame Better scroll event management using requestAnimationFrame. Install npm install @jamestomasino/scroll-frame Use const { addScrollListener

James Tomasino 2 Feb 12, 2022
Scroll made easy!

Demo - Installation - Methods - Callbacks - Styling ◼️ Features: ?? Native Scroll Behavior ?? Standardized events / shortcuts / API ?? Fast & Lightwei

Bruno Vieira 307 Nov 20, 2022
🚀 Scroll Follow Tab is a lightweight javascript library without jQuery, no dependencies.

Scroll Follow Tab is a lightweight javascript library without jQuery, no dependencies. It is used to make scrollspy effect for your menu, table of contents, etc. Only 21.7Kb.

Hieu Truong 11 Jun 20, 2022
🛤 Detection of elements in viewport & smooth scrolling with parallax.

Locomotive Scroll Detection of elements in viewport & smooth scrolling with parallax effects. Installation ⚠️ Scroll-hijacking is a controversial prac

Locomotive 5.9k Dec 31, 2022
Animate elements as they scroll into view.

Animate elements as they scroll into view. Introduction ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the vie

null 21.2k Jan 4, 2023
A javascript library to animate elements on scroll page events

ScrollJS by Sam Sirianni ScrollJS is a library written in Javascript. With ScrollJS you can animate elements on scroll events. Visit the ScrollJS webs

Sam Sirianni 1 Mar 21, 2021
zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

Marto.eth 10 Aug 25, 2022
A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to, e.g. the `className` prop of React elements. While transforming, the plugin processes all JavaScript style definitions found and bundles them up into a CSS file, ready to be requested from your web server.

babel-plugin-css-in-js A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to

Martin Andert 302 Sep 26, 2022
A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.

jQuery AniView A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view. Now supports v4

Jonathan James Cosgrove 216 Sep 10, 2022
A lightweight JavaScript utility to fade elements in and out of view on page scroll.

ScrollFade ScrollFade is used to fade elements in and out of view while scrolling through a page. Tag any elements you want to fade with the class scr

Jordan Trbuhovic 14 Dec 15, 2022
Create a deep copy of a set of matched elements with the dynamic state of all form elements copied to the cloned elements.

jq-deepest-copy FUNCTION: Create a deep copy of a set of matched elements while preserving the dynamic state of any matched form elements. Example Use

Michael Coughlin 5 Oct 28, 2022
Animate on scroll library

❗ ❗ ❗ This is README for aos@next ❗ ❗ ❗ For last stable release (v2) go here ?? Demo ?? Codepen Examples Different built-in animations With anchor set

Michał Sajnóg 22.3k Jan 2, 2023
An easy way to animate SVG elements.

Walkway I loved the animations for the polygon ps4 review a few months back and decided to create a small library to re-create them (simple demo). It

Connor Atherton 4.4k Jan 2, 2023