How to use it
It takes three steps. You do not need to write any JavaScript.
1. Add the two files
Copy reveal.css and reveal.js into your site. Link the CSS in the head and the script before the closing body tag.
<link rel="stylesheet" href="reveal.css"> ... <script src="reveal.js"></script>
2. Mark what should animate
Add data-reveal to any element and choose an effect.
<h2 data-reveal="up">This heading rises into place</h2> <img data-reveal="zoom" src="photo.jpg" alt=""> <p data-reveal="left" data-reveal-delay="200">This comes 0.2 seconds later.</p>
3. Let a group appear one by one
Put data-reveal-stagger on the parent. Every child follows the one before it.
<div class="cards" data-reveal-stagger="110"> <div class="card">One</div> <div class="card">Two</div> <div class="card">Three</div> </div>
All options
| Attribute | What it does |
|---|---|
data-reveal="up" | The effect. Choose from up, down, left, right, zoom, flip and blur. |
data-reveal-delay="200" | Waits this many milliseconds before it starts. |
data-reveal-repeat | Plays again every time the element comes back on screen. Without it, the effect plays once. |
data-reveal-stagger="110" | Goes on a parent. Each child starts this many milliseconds after the previous one. |
Change the speed or distance
The effects are plain CSS, so you change them in reveal.css. To make everything slower, change .8s to 1.2s in the first rule. To make the slide longer, change 36px to a bigger number.
Why this one and not a big library
- It is small. About 2 KB, so it does not slow your page down.
- It uses the browser's own observer. There is no scroll listener running all the time, so scrolling stays smooth on phones.
- Nothing is hidden if the script fails. Elements are only hidden after the script has started. With JavaScript off, the page simply shows everything.
- It respects reduced motion. Visitors who switched animations off in their system see the content at once.
Common questions
Does it work in WordPress?
Yes. Upload the two files to your theme and enqueue them, or paste them into a code snippets plugin. In Elementor and the block editor you can add data-reveal under the advanced attributes of a block.
My element flashes before it animates. Why?
The script loads late on that page. Move the script tag higher, or load it with defer in the head.
Can I use it in a client project?
Yes. The MIT licence allows commercial use.
What is in the download
reveal.jsthe script, about 2 KBreveal.cssthe seven effectsindex.htmlanddemo.cssthe demo page you see aboveREADME.txtandLICENSE.txtthe short guide and the MIT licence
Licence
MIT licence. Use it in personal and commercial projects, change it as you like. A link back is welcome and not required.