Intro

Hello, I'm JC 😁👋! I used AOS and Rellax in the react project above. I'd like to share my opinions on those libraries and hear yours.

Rellax

Rellax is a parallax library that works in both desktop & mobile (parallax is famous for not working on mobile).

Super easy to implement.

• Add a class to an element:

<div class="rellax">
  I’m slow and smooth
</div> 

• And initialize rellax by referring to that class in 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:

<div class="rellax" 
  data-rellax-speed="1" 
  data-rellax-mobile-speed="-10"
  data-rellax-desktop-speed="10">
  I’m slow on mobile but fast on pc!
</div> 

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

Jerky.

The image can jump a bit once in a while. It gets much worse when trying to record it. (My AMD processor ~= 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.

AOS (Animate on Scroll)

AOS is an animation library that handles all the scroll logic.

Super easy to implement.

• Add a data attribute data-aos and an animation class:

<div data-aos="fade-up"></div>

AOS has a lot of built-in animations like fade-up, fade-in, zoom-in, flip-up.

• And initialize AOS in js:

 AOS.init();

• You can add custom animations too:

[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:

No built-in responsive support.

If you want an animation to play only on mobile you need to create your own. It's a pretty serious drawback because built-in animations are not responsive.

Let's say you want fade-up to play on desktop but not on mobile. You can't 😅. You need to write your own fade-up with media query like this:

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

Unreliable?

Not too sure about this one but sometimes animations don't play. In my project the footer occasionally doesn't fade in. I've asked other AOS users on Twitter + googled and it seems I might not be the only one with this issue.

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 (>93% browsers support) to listen to scroll.
Here's a great tutorial by Kevin Powell.

Thanks for reading 😄✨!!

Please share what you agree & disagree on.

And tell me what npm modules/libraries you use the most 😍.