DEV Community

Cover image for Review on AOS (animation on scroll) and Rellax (parallax)
ljc-dev
ljc-dev

Posted on • Edited on

Review on AOS (animation on scroll) and Rellax (parallax)

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>


Enter fullscreen mode Exit fullscreen mode

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();


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

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:

aos fade in and up

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;
  }
}


Enter fullscreen mode Exit fullscreen mode

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: 
Enter fullscreen mode Exit fullscreen mode


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:
Enter fullscreen mode Exit fullscreen mode


html

I’m slow on mobile but fast on pc!


I've used it for the hero section of my site:

![hero section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4kun9qkjc87fmcmd3ya.gif)

### Cons

The only downside is that sometimes the animation can be *jumpy*.

![jumpy image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5r7xgo8kug84ase0dzmw.gif)

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 😍.
Enter fullscreen mode Exit fullscreen mode

Top comments (5)

Collapse
 
letoast profile image
letoast

You should check out basicscroll.electerious.com/ which works on CSS variables instead of updating css properties directly

Collapse
 
ljcdev profile image
ljc-dev

This looks awesome! Thanks for sharing letoast 😁. Gonna learn it asap!

Collapse
 
favouritejome profile image
Favourite Jome

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 😊.

Collapse
 
ljcdev profile image
ljc-dev

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

Collapse
 
johannesludloff profile image
Johannes Ludloff

Not exactly too sure since when this is possible but by now you can disable AOS on phones with:

AOS.init({
disable: "phone",
});