AOS is a very popular scroll animation library but it has some unexpected shortcomings with responsive design. Rellax is a rising star for parallax animations on desktop and mobile.
I wrote this short review after playing with both on a react website project.
AOS (Animate on Scroll)
AOS is an animation library that handles all the scroll logic.
Pros
Super easy to implement.
Just add a data attribute data-aos with an animation class like fade-up to have a fade up animation.
html
<div data-aos="fade-up"></div>
AOS has a lot of built-in animations classes like fade-up, fade-in, zoom-in, flip-up.
We only need to initialize AOS in js and our div will fade up when it enters the viewport.
js
AOS.init();
You can add custom animations too:
css
[data-aos="my-fade-up"] {
transform: translate3d(0, 100px, 0);
opacity: 0;
transition-property: transform, opacity;
}
[data-aos="my-fade-up"].aos-animate {
transform: translate3d(0, 0, 0);
opacity: 1;
}
You can customize with data attributes to change the animation duration, delay, or add an anchor, offset, etc.
In my project, I used AOS for fade in and up animations:
Cons
No built-in responsive design support.
If you want an animation to play only on mobile, you need to create your own. Say you want the built-in class fade-up to play on desktop but not on mobile. Well you can't 😅. You need to write your own fade-up with media query like this:
css
@media (min-width:1024px) {
[data-aos="my-fade-up"] {
transform: translate3d(0, 100px, 0);
opacity: 0;
transition-property: transform, opacity;
}
[data-aos="my-fade-up"].aos-animate {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
Verdict on AOS
If you don't know - or don't want - to handle scroll logic and create animations yourself, AOS is a real time saver!
Not a great pick for users who need to disable or show different animations depending on screen sizes.
An alternative would be to create CSS animations ourselves and use the intersection observer API to listen to scroll. I've made an introduction post on it here.
There's a lightweight library built upon it with sal.js that I'm really looking forward to play with.
Rellax
Rellax is a parallax library that works in both desktop & mobile (parallax is famous for not working on mobile).
Pros
Super easy to implement
- Add a class to an element: ``` html I’m slow and smooth
* And initialize rellax by referring to that class in js:
js
var rellax = new Rellax('.rellax');
With reactJS, you can use refs instead of classes.
* Customizable with data attributes.
For example, the following code is used to play the parallax at different speed on mobile and pc:
html
I’m slow on mobile but fast on pc!
I've used it for the hero section of my site:
### Cons
The only downside is that sometimes the animation can be *jumpy*.
It gets much worse when trying to record it (My AMD processor is like an old i3 😄).
### Verdict on Rellax
If you tried parallax before, you know how hard it is to get parallax working on mobile. Rellax is a real time saver if you don't mind occasional jumps 😅.
An alternative would be to use gsap with [scrollTrigger plugin](https://greensock.com/scrolltrigger).
### Thanks for reading 😄✨!!
Please share what you agree & disagree on.
And tell me what js/react libraries you use the most 😍.
Top comments (5)
You should check out basicscroll.electerious.com/ which works on CSS variables instead of updating css properties directly
This looks awesome! Thanks for sharing letoast 😁. Gonna learn it asap!
Nice of you to write avout the cons of both libraries, I haven't used Rellax yet. I'll keep it in mind for parallax design 😊.
Thx for reading buddy😄!! I have concluded those libraries work great for 99% people which is why they are so popular. Maybe it's because I'm on firefox & react +react router
Not exactly too sure since when this is possible but by now you can disable AOS on phones with:
AOS.init({
disable: "phone",
});