Menggunakan GSAP di React Vite 101

REACT

Hai semuanya. Hari ini aku mau sharing sedikit cara menggunakan GSAP untuk membuat animasi simple di navbar saat websitenya berada di mobile view. Ini sebenernya lebih ke notes notesku sih akan bagaimana cara menginclude GSAP ke React.

Yaudah, yuk kita preparation aja dulu.

1. Untuk bisa memasukan GSAP kedalam react, tentunya kalian musti punya React project dulu dong. untuk mensetup projectnya, kalian bisa baca ini: https://vitejs.dev/guide/
2. Sebelumnya, untuk bisa menginclude react, kamu harus download Node.JS dulu ya. Untuk linknya, kamu bisa banget ke https://nodesource.com/blog/installing-nodejs-tutorial-windows/

Oiya, sebelum lanjut, aku mau ngasih tau sedikit tentang apa yang akan aku lakukan. Jadi, aku itu mau ngebuat portfolio websiteku. saat ini itu baru sampai di navbar wkwkkwkw. Ini bentukannya:

NAVBAR SIMPLE

Nah, aku itu mau ngebuat kayak begini:

TO DO

Tapi ya di mobile bentukan (kalo mau cek di sini: https://codepen.io/ahmedriad1/pen/RwNdrXp), kalo ini kan di desktop ya. Intinya, aku mau masukin animasi itu di mobile design ku (Kalo kamu nanya kenapa, ya pengen aja):

Nah, yuk kita mulai beneran :)

Simple-simple aja ya

• Install gsap

npm install gsap

• Import Gsapnya ya

import { gsap } from 'gsap';

• Buat dua navbar, satu saat pertama kali load dan satu saat sudah di click burgernya.

export default function navbar(){

    const [showNavBarSmall, setShowNavBarSmall] = useState(false)

    return(){
      <>
        <div className=' bg-black font-sen text-bold w-screen'>...</div> 
        <div 
            className=
              {`toBeAnimated bg-black flex flex-col font-sen
               text-bold w-screen fixed top-0 left-0 h-screen md:hidden 
              ${showNavBarSmall? " ":"hidden"}`}>
      </>
    }
}

Nah, seperti yang kamu liat, aku ngeset state (useState(false)). Ini fungsinya untuk pas ngeclick button show dia keliatan, contohnya begini.

• Kemudian tinggal kamu tambahin deh animasinya.

const animate = () =>{
        if(showNavBarSmall === false){
            console.log('false')
            tl.current = gsap.timeline()
            tl.current
                .fromTo('.toBeAnimated',  { opacity: 0, zIndex:-1 }, { opacity: 1, duration: 0.5, zIndex:50 })
                .from('.insertIntoAnimation', {x: 1000, ease:"power1.out", stagger:0.3})
                .fromTo('.active', {backgroundColor: "bg-black"}, {backgroundColor: "#FF8A00", duration: 0.2});
            setShowNavBarSmall(!showNavBarSmall); // Update the state after the animation
        }else if(showNavBarSmall === true){
            console.log('false')
            tl.current = gsap.timeline({
                onComplete: () => {
                    setShowNavBarSmall(!showNavBarSmall); // Update the state after the animation -> Ini biar enggak keburu hidden baru animasinya jalan
                },
            });
    
            tl.current
            .fromTo('.toBeAnimated',  { opacity: 0, zIndex:-1 }, { opacity: 1, duration: 0.5, zIndex:50 })
            .from('.insertIntoAnimation', {x: 1000, ease:"power1.out", stagger:0.3})
            .fromTo('.active', {backgroundColor: "bg-black"}, {backgroundColor: "#FF8A00", duration: 0.2});

        }
    }

• Jangan lupa juga untuk buat click functionnya

 function showMenu() {
       
        console.log('clicked')
        if(!tl.current){
            animate()
        }else{
            tl.current.reversed(!tl.current.reversed())
        }
    }

• Begini deh final resultnya

• Ini Final Code untuk animasinya

const [showNavBarSmall, setShowNavBarSmall] = useState(false)
    const app = useRef();
    const tl = useRef(null);
    function showMenu() {
       
        console.log('clicked')
        if(!tl.current){
            animate()
        }else{
            tl.current.reversed(!tl.current.reversed())
        }
    }   

    const animate = () =>{
        if(showNavBarSmall === false){
            console.log('false')
            tl.current = gsap.timeline()
            tl.current
                .fromTo('.toBeAnimated',  { opacity: 0, zIndex:-1 }, { opacity: 1, duration: 0.5, zIndex:50 })
                .from('.insertIntoAnimation', {x: 1000, ease:"power1.out", stagger:0.3})
                .fromTo('.active', {backgroundColor: "bg-black"}, {backgroundColor: "#FF8A00", duration: 0.2});
            setShowNavBarSmall(!showNavBarSmall); // Update the state after the animation
        }else if(showNavBarSmall === true){
            console.log('false')
            tl.current = gsap.timeline({
                onComplete: () => {
                    setShowNavBarSmall(!showNavBarSmall); // Update the state after the animation -> Ini biar enggak keburu hidden baru animasinya jalan
                },
            });
    
            tl.current
            .fromTo('.toBeAnimated',  { opacity: 0, zIndex:-1 }, { opacity: 1, duration: 0.5, zIndex:50 })
            .from('.insertIntoAnimation', {x: 1000, ease:"power1.out", stagger:0.3})
            .fromTo('.active', {backgroundColor: "bg-black"}, {backgroundColor: "#FF8A00", duration: 0.2});

        }
    }

NOTES

1. Gak tau kenapa, aku kalo gak ngeset zIndex, pasti jadi overlayer si nav khusus animasinya. jadi di animasi kamu jangan lupa untuk ngeset zIndex ya.
2. Ini hanya simple code dan jauh dari sempurnya, harusnya mah pake useEffect dan lain-lainnya, jadi ya kalo mau sempurnya monggo explore lagi.
3. Jauh sih dari contoh, tapi ya aku maunya begini, maka beginilah hasilnya wkwkkw.

CLOSURE

Thank you sudah mau membaca ❤. Inget, ini lebih ke tulisan untuk aku di masa depan kalo mau ngebuat codingan yang mirip-mirip, makanya semrawut (kek yang lain enggak aja wkwkwk). Sekali lagi, terima kasih banyak sudah mau membaca sampai sejauh ini. Kalo ada saran, langsung aja dikontak writernya. Ingat, kalo menurut kamu ribet, pelan pelan bacanya, sambil minum kopi juga oke. Sampai jumpa ya di pertemuan selanjutnya.

Notes: Untuk aku di masa depan, cek aja ya si github wkwkw.