Are you looking for an easy way to add scroll-based reveal animations to your website? Meet **SimpleReveal** – a lightweight, no-dependency JavaScript library that helps you bring elements to life as users scroll. Whether you’re building a personal portfolio, a landing page, or a blog, SimpleReveal makes it simple to create engaging scroll animations with minimal setup.
What is SimpleReveal?
SimpleReveal is a straightforward alternative to libraries like ScrollReveal and AOS. It uses the modern [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to detect when elements enter the viewport and reveals them with smooth CSS animations. With just a few lines of code and some CSS classes, you can animate any element on your page.
Key Advantages:
No dependencies: Pure JavaScript and CSS.
Easy to use: Add a class, and you’re done.
Lightweight: Minimal impact on performance.
Customizable: Control direction, delay, and more via classes and CSS variables.
Features
SimpleReveal comes with several handy features:
Multiple Reveal Directions: Animate elements from the top, bottom, left, or right using classes like `simrev-up`, `simrev-down`, `simrev-left`, and `simrev-right`.
Animation Delays: Add delay to each reveal for a staggered effect using `simrev-up-delay`, `simrev-right-delay`, etc., and set a custom delay with a CSS variable.
Responsive: Works on all modern browsers.
Minimal Setup: Just include the CSS and JS files, add classes, and you’re ready to go!
Getting Started
1. Installation
To use SimpleReveal, you just need to include the CSS and JS files in your HTML.
<link rel="stylesheet" href="assets/simrev/simrev.css">
<script src="assets/simrev/simrev.js"></script>
You can also include the optional Prism CSS/JS if you want syntax highlighting for code examples.
2. Usage
Add the desired reveal class to any element you want to animate on scroll. Here are the main classes you can use:
| Class | Effect |
|---|---|
simrev-up |
Reveals from bottom to top |
simrev-down |
Reveals from top to bottom |
simrev-left |
Reveals from right to left |
simrev-right |
Reveals from left to right |
simrev-up-delay |
Reveals from bottom, with custom delay |
simrev-right-delay |
Reveals from left, with custom delay |
You can stack these classes as needed and even add a custom delay for staggered effects:
<img class="simrev-up-delay" style="--delay:200ms;" src="image.jpg" />
3. Example Code
Here’s a quick example of a section using SimpleReveal:
<div class="section simrev-up">
<h2>Welcome to SimpleReveal</h2>
<p>This content will animate in from the bottom as you scroll.</p>
</div>
<div class="section simrev-right-delay" style="--delay:300ms;">
<h2>Staggered Reveal</h2>>
<p>This section will reveal from the left, with a 300ms delay.</p>
</div>
4. Full Demo
Below is a more complete HTML example, ready to use:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SimpleReveal Demo</title>
<link rel="stylesheet" href="assets/simrev/simrev.css">
</head>
<body>
<div class="container simrev-up">
<h1>Hello</h1>
</div>
<div class="container simrev-right">
<h1>Hello Right</h1>
</div>
<div class="container simrev-up-delay" style="--delay:300ms;">
<h1>Hello with Delay</h1>
</div>
<script src="assets/simrev/simrev.js"></script>
</body>
</html>
How It Works
SimpleReveal uses the Intersection Observer API to watch for elements with the specified classes. When an element enters the viewport, the script adds the corresponding CSS classes to trigger the animation. You can control both the direction and the delay just by changing the class name or setting a --delay style.
Advanced Usage
- Custom Animation Duration: You can customize the animation duration using CSS variables.
- Combining Effects: Mix and match direction and delay classes for unique effects.
- Responsive Design: Works seamlessly with responsive layouts.
Conclusion
SimpleReveal is a fast, easy, and reliable way to add scroll-based reveal animations to any website. With just a few classes and no dependencies, you can create beautiful transitions that keep your users engaged.
Ready to try it?
Check out the SimpleReveal GitHub repository for the latest source code, documentation, and examples.