Menggunakan AOS Animation Library di NextJS - Blog - Naufaldi Rafif Satriya

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.

Landingpage Cryptocurrency. Build from NextJS by DipaInhouse.

](https://crypto-landingpage.vercel.app/?ref=blog.naufaldi.com)

[

Collabs Landingpage

](https://collabs-landing.vercel.app/?ref=blog.naufaldi.com)

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.

[

AOS - Animate on scroll library

Animate On Scroll library using CSS3

Animate on scroll library

](https://michalsnik.github.io/aos/?ref=blog.naufaldi.com)

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!

Referensi :

[

michalsnik/aos

Animate on scroll library. Contribute to michalsnik/aos development by creating an account on GitHub.

](https://github.com/michalsnik/aos?ref=blog.naufaldi.com)

[

AOS - Animate on scroll library

Animate On Scroll library using CSS3

Animate on scroll library

](https://michalsnik.github.io/aos/?ref=blog.naufaldi.com)

Bagikan[](https://twitter.com/share?text=Menggunakan AOS Animation Library di NextJS&url=https://blog.naufaldi.com/menggunakan-wowjs-dan-anime/ "Twitter")[](https://www.facebook.com/sharer/sharer.php?u=https://blog.naufaldi.com/menggunakan-wowjs-dan-anime/ "Facebook")[](https://www.linkedin.com/shareArticle?mini=true&url=https://blog.naufaldi.com/menggunakan-wowjs-dan-anime//&title=Menggunakan AOS Animation Library di NextJS "LinkedIn")[](/cdn-cgi/l/email-protection#ad92ded8cfc7c8ced990e0c8c3cacad8c3ccc6ccc38dece2fe8decc3c4c0ccd9c4c2c38de1c4cfdfccdfd48dc9c48de3c8d5d9e7fe8bccc0dd96cfc2c9d490c5d9d9dd978282cfc1c2ca83cbccc1c9c483d5d4d782c0c8c3cacad8c3ccc6ccc380dac2dac7de80c9ccc380ccc3c4c0c882 "Email")

Topik ChakraUI CSS NextJS Tutorial

[

Pattern Blur Image, memilih antara SVG atau PNG

Sebulan terakhir ini, saya mendapatkan salah satu pekerjaan untuk implementasi sebuah situs…

09 Sep 2021

](/pattern-blur-memilih-antara-svg-atau-png/)[

Snippet Membuat Gradient Underline

Masalah Beberapa hari kemarin, saya mendapatkan tugas untuk membuat sebuah warna gradient…

22 Jun 2021

](/membuat-gradient-underline/)