Menggunakan AOS Animation Library di NextJS

ChakraUI Jun 22, 2021

Problem

Sebelumnya, saya menggunakan Framer Motion untuk membuat animation di Web Apps NextJS. Namun, belakangan ini menyadari adakalanya Framer Motion terlalu Overkill. Memang, overkill atau over engineering itu bagus untuk kita belajar. Namun, saya juga perlu explorasi yang lain. Kira-kira menyesuaikan kebutuhan untuk project yang akan dibangun. Misalnya saja beberapa situs yang saya buat menggunakan Framer Motion untuk sekedar animasi on scroll page yaitu

Landingpage Cryptocurrency. Build from NextJS by DipaInhouse.

Niko ChristiAccountant - MorkisaCoinbase

Collabs Landingpage

Memang menggunakan Framer Motion membuat kita menjadi lebih mudah untuk melakukan kustomisasi dalam membuat animasi, kita bahkan bisa menganimasikan element apapun. Nah, saat waktu project yang kita kerjakan sangat sedikit, waktu untuk memberikan animasi begitu sedikit, maka saya memerlukan sebuah library yang bisa memberikan animasi on scroll secara instant. Karena, Framer Motion memerlukan library tambahan seperti react-intersection-observer untuk bisa mendeteksi inview atau saat sebuah element berada pada view user.

Solution

Saya pun menemukan https://wowjs.uk/ dan berencana menggunakan https://animate.style/ sayangnya, lisensi Wow JS tidak memperbolehkan secara gratis apabila digunakan untuk keperluan komersial. Harus membayar untuk bisa digunakan pada project komersial.

Sumber : https://github.com/matthieua/WOW

Sehingga saya pun mencari solusi lain dan menemukan AOS.

Hebatnya, semua dalam satu cakupan. Animasi, Deteksi scroll dan tidak menggunakan JQuery. Tentu saja, artinya kita bisa menambahkannya dengan NextJS bukan?

Beberapa animasi yang disediakan antara lain :

Fade Animation
Flip Animation
Slide Animation
Zoom Animation

Cara Memasang AOS di NextJS

Install via NPM

npm install --save aos@next

Import AOS

Melalui _app dengan import lib aos dan stylenya.

...
import AOS from 'aos';
import 'aos/dist/aos.css';
...

function MyApp({ Component, pageProps }) {
 
  return (
    <>
    ...
        <Component {...pageProps} />
	...
    </>
  );
}

export default MyApp;

Inisasi AOS

Menggunakan useEffect kita melakukan inisasi AOS. Saya menyarankan untuk menambahkan beberapa global setting yaitu easing, once dan offset . Misalnya seperti ini

import { useEffect } from 'react';
import AOS from 'aos';
import 'aos/dist/aos.css';

...

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    AOS.init({
      easing: 'ease-out-cubic',
      once: true,
      offset: 50,
      delay: 50,
    });
  });
  return (
    <>
     ...
     <Component {...pageProps} />
      ...
    </>
  );
}

export default MyApp;

Cara Menggunakan AOS

Cukup menambahkan data-aos="namaAnimasi" misalkan data-aos="fade-up . Nama, nama animasi bisa dilihat di dokumentasi AOS. Contohnya menambahkannya pada component Chakra UI berikut:

          <Heading
            as="h2"
            fontWeight="600"
            textAlign={{ base: 'center', sm: 'left' }}
            fontSize={{ base: '30px', sm: '54px' }}
            lineHeight={{ base: '36px', lg: '64.8px' }}
            data-aos="fade-left"
          >
            Did you know?
          </Heading>

Komponen Heading

Untuk lebih smooth, kita bisa menambahkan delay, data-aos-delay="200" (dalam waktu ms) seolah olah animasinya saling menunggu. Misalnya seperti ini

          <Heading
            as="h2"
            fontWeight="600"
            textAlign={{ base: 'center', sm: 'left' }}
            fontSize={{ base: '30px', sm: '54px' }}
            lineHeight={{ base: '36px', lg: '64.8px' }}
            data-aos="fade-left"
          >
            Did you know?
          </Heading>
          <Text
            fontSize={{ base: '18px', sm: '24px' }}
            lineHeight="31.2px"
            my={{ base: '22px', sm: '43px' }}
            textAlign={{ base: 'center', sm: 'left' }}
            data-aos="fade-left"
            data-aos-delay="200"
          >
           lorem ipsum dolor amet sir 
          </Text>

Komponen Text

Semoga membantu!