scrollreveal
Advanced tools
Animate elements as they scroll into view.
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="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
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.
</h1>
ScrollReveal().reveal('.headline');
🔎 See this demo live on JSBin
If you’re using an older version of ScrollReveal, you can find legacy documentation in the wiki
Licensed under the GNU General Public License 3.0 for compatible open source projects and non-commercial use.
For commercial sites, themes, projects, and applications, keep your source code private/proprietary by purchasing a Commercial License.
Copyright 2018 Fisssion LLC
[4.0.0] - 2018-08-06
options.desktop.sr is added to <html> during instantiation when supported. #294height: 100% is added to <body> during instantiation when supported. #298options.opacity is set to null.options.cleanup toggles whether generated styles are removed upon reveal completion (when options.reset is false). #292clean() method removes specific generated styles and event listeners. #227destroy() method removes all generated styles and event listeners. #227debug static property toggles error messages in console. #351reveal() method no longer accepts an interval parameter. Instead, sequence intervals are now defined with options.interval.isSupported() is now static.options.distance supports only em px and % values.matrix3d() property, with the correct prefix and only when necessary. #292version is now a read-only instance property.options.viewFactor clamps values outside of 0.0 to 1.0.requestAnimationFrame polyfill now reliably throttles callback invocations.FAQs
Animate elements as they scroll into view
The npm package scrollreveal receives a total of 16,638 weekly downloads. As such, scrollreveal popularity was classified as popular.
We found that scrollreveal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.