AOS (Animate On Scroll) is still downloaded about 174,000 times a week. Its last release, 2.3.4, came out in October 2018, and 3.0 never left beta. I wanted a maintained, typed version with the same animations and options, so I built reveal-on-scroll.
Quick start
npm install reveal-on-scroll
import ROS from 'reveal-on-scroll';
import 'reveal-on-scroll/style.css';
ROS.init();
<div data-ros="fade-up">I fade in when you scroll to me.</div>
No bundler? Use the CDN:
<link rel="stylesheet" href="https://unpkg.com/reveal-on-scroll/dist/reveal-on-scroll.css" />
<script src="https://unpkg.com/reveal-on-scroll/dist/reveal-on-scroll.js"></script>
<script>
ROS.init();
</script>
Switching from AOS
The animation names and options are the same, so it's a find-and-replace:
| AOS | reveal-on-scroll |
|---|---|
npm install aos |
npm install reveal-on-scroll |
import AOS from 'aos' |
import ROS from 'reveal-on-scroll' |
data-aos, data-aos-*
|
data-ros, data-ros-*
|
aos-init, aos-animate
|
ros-init, ros-animate
|
aos:in, aos:out
|
ros:in, ros:out
|
What's different
- Size: 3.6 kB gzipped (JS 2.7 kB + CSS 0.9 kB). AOS 2.3.4 is 6.7 kB (JS 4.6 kB + CSS 2.1 kB).
-
Positions stay right. Triggers are recalculated while you scroll and when images, fonts or content load, so you don't need to call
refresh(). - Reduced motion. If the user asked for less motion, elements fade instead of moving.
- No lost content. With JavaScript off, or if the script fails to load, everything stays visible.
- Any timing. Durations and delays can be any number of milliseconds, and easing can be any CSS easing function.
- Types included, ESM and UMD builds, zero dependencies.
-
Optional scroll-scrubbed mode (
data-ros-scrub) using native scroll-driven animations.
Honest limits
- The scrub mode needs CSS scroll-driven animations. At the time of writing that means Chrome 115+ and Safari 26+; Firefox only has them in preview builds.
- It's version 0.1, so expect small API additions. The options and animation names follow AOS, so those will stay.
- It's an independent project. It isn't affiliated with or endorsed by AOS or its author. Thank you to them for the original idea.
Links
- Live demo: https://m-hassan-siddiqui.github.io/reveal-on-scroll/
- npm: https://www.npmjs.com/package/reveal-on-scroll
- GitHub: https://github.com/M-Hassan-Siddiqui/reveal-on-scroll
If you use AOS today, I'd love to hear what's missing. Issues and stars are very welcome.
Top comments (0)