GSAP Overview

GSAP (GreenSock Animation Platform) adalah library animasi JavaScript yang paling powerful dan mature. GSAP bisa menganimasi hampir apapun — DOM elements, SVG, Canvas, bahkan objek JavaScript biasa. GSAP digunakan oleh banyak website award-winning.

Instalasi

npm install gsap

import gsap from 'gsap';

Tween — Animasi Dasar

// gsap.to() — animasi dari state saat ini KE target
gsap.to('.box', {
  x: 300,         // translateX
  y: 100,         // translateY
  rotation: 360,  // rotate
  duration: 1,    // detik
  ease: 'power2.out',
});

// gsap.from() — animasi DARI target ke state saat ini
gsap.from('.box', {
  opacity: 0,
  y: 50,
  duration: 0.8,
  ease: 'power3.out',
});

// gsap.fromTo() — tentukan from DAN to
gsap.fromTo('.box',
  { opacity: 0, scale: 0.5 },    // from
  { opacity: 1, scale: 1, duration: 0.6 }  // to
);

Properties GSAP

GSAP menggunakan nama properti yang lebih pendek:

Timeline — Sequencing

Timeline memungkinkan kamu menyusun animasi secara berurutan:

const tl = gsap.timeline();

tl.from('.title', {
    opacity: 0, y: -50, duration: 0.8
  })
  .from('.subtitle', {
    opacity: 0, y: 30, duration: 0.6
  })
  .from('.button', {
    opacity: 0, scale: 0.8, duration: 0.4
  });

Positioning Animasi di Timeline

const tl = gsap.timeline();

// Berurutan (default)
tl.to('.a', { x: 100, duration: 1 })
  .to('.b', { x: 100, duration: 1 })  // mulai setelah .a selesai

// Overlap — mulai 0.5 detik sebelum animasi sebelumnya selesai
  .to('.c', { x: 100, duration: 1 }, '-=0.5')

// Delay — mulai 0.3 detik setelah animasi sebelumnya selesai
  .to('.d', { x: 100, duration: 1 }, '+=0.3')

// Absolute position — mulai di detik ke-2 dari awal timeline
  .to('.e', { x: 100, duration: 1 }, 2)

// Label
tl.addLabel('section2', 3)
  .to('.f', { x: 100, duration: 1 }, 'section2');

Stagger

Animasi beberapa elemen dengan delay berurutan:

// Setiap elemen mulai 0.1 detik setelah sebelumnya
gsap.from('.card', {
  opacity: 0,
  y: 40,
  duration: 0.6,
  stagger: 0.1,
  ease: 'power2.out',
});

// Stagger dari tengah
gsap.from('.card', {
  opacity: 0,
  scale: 0.8,
  stagger: {
    each: 0.1,
    from: 'center',
  },
});

// Stagger grid (2D)
gsap.from('.grid-item', {
  opacity: 0,
  scale: 0,
  stagger: {
    each: 0.05,
    grid: [4, 6],      // rows x cols
    from: 'center',
  },
});

ScrollTrigger Plugin

Plugin paling populer — menghubungkan animasi dengan scroll:

import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

// Animasi saat elemen masuk viewport
gsap.from('.section', {
  opacity: 0,
  y: 100,
  duration: 1,
  scrollTrigger: {
    trigger: '.section',
    start: 'top 80%',   // trigger saat top elemen di 80% viewport
    end: 'top 20%',
    toggleActions: 'play none none reverse',
  },
});

// Pin + scrub — animasi terikat dengan scroll progress
gsap.to('.horizontal-section', {
  xPercent: -100,
  ease: 'none',
  scrollTrigger: {
    trigger: '.container',
    pin: true,
    scrub: 1,        // smooth scrubbing
    end: '+=3000',   // scroll distance
  },
});

Easing di GSAP

// Built-in eases
gsap.to('.box', { x: 300, ease: 'power1.out' }); // subtle
gsap.to('.box', { x: 300, ease: 'power2.out' }); // moderate
gsap.to('.box', { x: 300, ease: 'power3.out' }); // strong
gsap.to('.box', { x: 300, ease: 'power4.out' }); // very strong

// Special eases
gsap.to('.box', { x: 300, ease: 'back.out(1.7)' });    // overshoot
gsap.to('.box', { x: 300, ease: 'bounce.out' });        // bounce
gsap.to('.box', { x: 300, ease: 'elastic.out(1, 0.3)' }); // elastic

Contoh: Page Intro Animation

const tl = gsap.timeline({
  defaults: { ease: 'power3.out' }
});

tl.from('.hero-title', {
    opacity: 0,
    y: 60,
    duration: 1,
  })
  .from('.hero-subtitle', {
    opacity: 0,
    y: 40,
    duration: 0.8,
  }, '-=0.5')
  .from('.hero-cta', {
    opacity: 0,
    scale: 0.8,
    duration: 0.6,
  }, '-=0.3')
  .from('.hero-image', {
    opacity: 0,
    x: 100,
    duration: 1,
  }, '-=0.6');

GSAP sangat powerful untuk animasi yang membutuhkan koordinasi kompleks. Kelemahannya: bundle size lebih besar dan learning curve lebih tinggi dari CSS animation.