Postavljanje GSAP-a u Next.js

Uskladiti GSAP kako bi radio kako treba unutar Next.js aplikacije može biti prava glavobolja ako ne znate što radite. Ako ste ikada potrošili dane boreći se s neispravnim animacijama, onda znate točno o čemu pričam. Kada ciljate na luksuzan, high-end izgled i osjećaj web stranice za vašeg klijenta, zadnje što vam treba su elementi koji neočekivano skaču po ekranu. Naravno, ovi se problemi mogu svesti na minimum pravilnom inicijalizacijom i korištenjem GSAP-a od samog početka.

Srećom, odradili smo "prljavi posao" za vas. U nastavku ćemo vam predstavit početnu točku od koje možete nastavit graditi dalje, kako biste se mogli fokusirati na kreativnu stranu projekta. Uz to, s obzirom na to da su GSAP-ovi dodaci nedavno postali potpuno besplatni, nikada nije bilo bolje vrijeme za savladavanje ove biblioteke.

Što je GSAP i zašto ga koristiti?

Krenimo redom, u slučaju da niste upoznati s GSAP-om, evo kratkog uvoda i objašnjenja zašto je on u Workspaceu naš prvi izbor za animacije.

Iako CSS animacije funkcioniraju za jednostavne prijelaze, taj pristup brzo postaje noćna mora za održavanje kako raste kompleksnost projekta. Zato većina developera s vremenom posegne za nekom od JavaScript biblioteka kako bi pojednostavili taj proces. Danas na tržištu postoje dva standarda Motion i GSAP. Obje su opcije izvrsne i na kraju se sve svodi na to što preferirate i što bolje odgovara vašim potrebama. Nemamo ništa protiv Motiona, ali GSAP-ova imperativna kontrola nudi stupanj slobode i preciznosti koji jednostavno ne možete dobiti drugdje.

Iz tog razloga koristimo GSAP kad god trebamo kreirati animacije. Međutim, ta je moć mač s dvije oštrice jer zahtijeva aktivniji pristup upravljanju životnim ciklusom animacije.

Početak rada

Da biste započeli s GSAP-om, možete pogledati dokumentaciju za detaljne upute. No, ukratko, dovoljno je instalirati gsap i @gsap/react pomoću vašeg preferiranog package managera.

Možda se pitate čemu služi taj drugi dependency i zašto nam je potreban ako je GSAP neovisan o platformi? Iako GSAP doista jest neovisan, postoji nekoliko stvari na koje treba paziti kada radite unutar React projekta. Ako imate iskustva s GSAP-om iz "vanilla JS" svijeta, možda ste navikli samo dodati gsap.to() i izravno ciljati element koji želite animirati. No, u Reactu je ručna DOM manipulacija obično veliko ne jer može dovesti do curenja memorije ili bljeskanja nestiliziranog sadržaja (FOUC). Srećom, GSAP nam čuva leđa i nudi nam useGSAP hook unutar @gsap/react paketa. On omogućuje automatsko čišćenje i upravljanje životnim ciklusom, osiguravajući da se vaše animacije ne "svađaju" s Reactovim Virtual DOM-om. Za više informacija, dokumentacija je ponovno vaš najbolji prijatelj.

Setup

Umjesto registriranja pluginova u svakoj pojedinačnoj komponenti, najbolje je imati centraliziran setup na jednom mjestu. Na taj je način sve organizirano, a vi osiguravate dosljednost i lakše održavanje kroz cijeli projekt. U Next.js projektu koji koristi App Router, konfiguraciju GSAP-a obično centraliziramo u globalnom provideru unutar providers.tsx datoteke u app direktoriju. Ovisno o vašoj strukturi datoteka, ovo naravno možete prilagoditi svojim potrebama.

'use client';

import { PropsWithChildren } from 'react';

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { ReactLenis } from '@studio-freight/react-lenis';

gsap.registerPlugin(ScrollTrigger);

const Providers = ({ children }: PropsWithChildren) => {
  return (
    <ReactLenis root>
      {children}
    </ReactLenis>
  );
};

export default Providers;

Primijetit ćete da smo children omotali s ReactLenis. To smo uključili kao bonus kako bismo pokazali koliko je lako dodati smooth scrolling u projekt s ovakvim setupom. Iako vam ne treba da bi GSAP radio, ako koristite puno animacija temeljenih na skrolanju, on je vrlo koristan. U budućim objavama imat ćemo priliku detaljnije istražiti naprednije scroll animacije.

Vaša prva animacija

Odlično, sada kada smo riješili setup, zaronimo i kreirajmo jednostavnu animaciju kako biste dobili osjećaj kako stvari funkcioniraju. Za vašu prvu animaciju napravit ćemo reveal komponentu. Koristit ćemo Tweens. To je temeljni GSAP koncept. Tweens odrađuju sav posao oko animiranja. Služe kako bi upravljali svojstavima objekta. Dajete im objekte koje želite animirati i odredite koja svojstva želite mijenjati. Za jednostavne animacije bez kompliciranog nizanja (engl. sequencing), Tweens su obično sasvim dovoljni.

'use client';

import { PropsWithChildren, useRef } from 'react';
import gsap from 'gsap';
import { useGSAP } from '@gsap/react';

const SmoothReveal = ({ children }: PropsWithChildren) => {
  const containerRef = useRef<HTMLDivElement>(null);

  useGSAP(() => {
    // Početno stanje (nevidljivo i lagano pomaknuto)
    gsap.set(containerRef.current, {
      y: 30,
      autoAlpha: 0,
    });

    // "Tween": Animiranje do konačnog stanja
    gsap.to(containerRef.current, {
      y: 0,
      autoAlpha: 1,
      duration: 1,
      ease: 'power3.out',
    });
  });

  return <div ref={containerRef}>{children}</div>;
};

export default SmoothReveal;

Prvo kreiramo referencu na DOM element koji animiramo pomoću useRef i dodijelimo je elementu. Zatim unutar useGSAP hooka definiramo animaciju. Koristimo metodu set kako bismo postavili početni izgled elementa. Potom koristimo to i deklariramo kako izgleda krajnja točka animacije, odnosno prema čemu animiramo.

Važno je istaknuti da koristimo autoAlpha umjesto opacity jer on automatski upravlja i s visibility: hidden. To poboljšava performanse i sprječava korisnike da slučajno kliknu na "nevidljive" elemente prije nego što animacija završi. Kako biste spriječili bljeskanje sadržaja prije nego što se JavaScript učita, također biste trebali postaviti svoj glavni wrapper na visibility: hidden u CSS-u.

Zaključak

Spremni ste! Sada imate skalabilan temelj za animacije u Next.js-u. Centralizacijom konfiguracije i korištenjem @gsap/react hooka za upravljanje životnim ciklusom, eliminirali ste veliku većinu uobičajenih bugova u React animacijama. Eksperimentirajte s kreiranjem vlastitih animacija, igrajte se s različitim svojstvima, pokvarite animacije, popravite ih pa ih ponovno pokvarite, tako ćete najbolje naučit.

U planu imamo još GSAP blogova u kojima ćemo se posvetiti kompleksnijim temama. U međuvremenu, slobodno pogledajte neki od naših ostalih blogova.