Contoh Web GSAP: 10 Website Peraih Penghargaan Awwwards 2026

Artikel ini mengumpulkan sepuluh contoh web GSAP yang memperoleh pengakuan Awwwards pada September–Oktober 2026, lalu membedah teknik animasi yang bisa Anda pelajari dari masing-masing situs. GreenSock Animation Platform (GSAP) adalah mesin animasi JavaScript yang framework-agnostic; situs-situs ini memakainya untuk scroll storytelling, tipografi bergerak, SVG, hingga orkestrasi WebGL.

Kami tempatkan daftar contoh di awal agar Anda melihat hasil nyata sebelum masuk ke syntax. Selanjutnya, artikel ini menjelaskan konteks penilaian Awwwards, pola motion yang berulang, dasar API GSAP, ScrollTrigger, implementasi WordPress ringkas, performa, dan preferensi reduced motion.

Sepuluh Contoh Web GSAP dari Awwwards

Semua URL di bawah aktif pada riset editorial Oktober 2026 dan GSAP terdeteksi di HTML atau bundle JavaScript masing-masing situs. Sementara itu, status penghargaan mengacu halaman Awwwards per domain; plugin spesifik (ScrollTrigger, SplitText, MorphSVG, DrawSVG) hanya disebut bila inspeksi source mendukung.

1. EDOLUS

edolus.com — SOTD Awwwards, 4 Oktober 2026. Pengalaman WebGL sinematik seputar infrastruktur AI, dengan audio dan storytelling visual. Jadi, GSAP sering menjadi lapisan orkestrasi di atas renderer berat, bukan pengganti WebGL.

2. Moto Finance

moto-card.com — SOTD, 24 September 2026. Landing kartu finansial dengan 3D, parallax, dan presentasi berbasis scroll; source menunjukkan GSAP 3.15, ScrollTrigger, dan SplitText. Kemudian, situs ini cocok sebagai referensi stagger teks plus scrub halaman produk.

3. The Tuscan Journey — Weekend Max Mara

Campaign Monogrid — pemenang harian Awwwards, 13 September 2026. Kampanye fashion interaktif dengan WebGL, audio, dan narasi visual; GSAP mengatur transisi antar beat konten.

4. White Desert

white-desert.com — SOTD (11 September 2026). Situs ekspedisi mewah ke Antartika; ScrollTrigger, DrawSVG, dan MotionPath terdeteksi. Ternyata, kombinasi scroll journey plus path SVG paling mudah dipelajari di sini.

5. Spyker Cars

spykercars.com — Honorable Mention, 12 September 2026. Simulasi “sehari memiliki Spyker” dengan scene 3D; meski motion kaya, alurnya tetap mengikuti cerita otomotif, bukan dekorasi acak.

6. ACME Cups

acmecups.nz — Nominee, 2 Oktober 2026. Toko Shopify dengan ScrollTrigger dan SplitText pada presentasi produk. Walau tampil eksperimental, stack e-commerce tetap memakai GSAP.

7. New York Philharmonic — Gustavo Dudamel

nyphil.org/discover/gustavo — Nominee, 3 Oktober 2026. Editorial immersive profil maestro; maka interaksi mendukung konten panjang tanpa memecah artikel menjadi PDF statis.

8. L.I.S.A. — Locomotive

lisa.locomotive.ca — penghargaan hari itu, 16 September 2026. Asisten AI interaktif dengan WebGL 3D dan antarmuka motion-heavy; timeline GSAP sinkron dengan state UI.

9. bleibtgleich’26

bleibtgleich.dev — SOTD 22 September 2026. Portfolio eksperimental Webflow; MorphSVG, SplitText, dan CustomEase terdeteksi—fokus tipografi dan morph SVG.

10. Don’t Look Up

dontlookup.app — Nominee, 20 September 2026. Pengalaman browser game satir; Three.js plus GSAP 3.15 menggerakkan objek scene dan transisi level.

Bila Anda menelusuri daftar di atas, perhatikan motion selalu melayani konten: setiap situs memetakan animasi ke tujuan—produk, cerita, atau simulasi.

Konteks Penilaian Awwwards

Awwwards adalah platform penghargaan web—bukan lembaga standar industri. Sepuluh situs di atas lolos kurasi; juri desainer, developer, dan agensi menilainya, plus suara pengguna PRO tervalidasi.

Menurut halaman evaluasi Awwwards, setiap kandidat dinilai minimal 18 juri selama lima hari dengan bobot Design 40%, Usability 30%, Creativity 20%, Content 10%; tiga skor ekstrem dibuang.

Ternyata, bobot desain 40% menjelaskan mengapa motion kuat sering muncul, tetapi usability tetap harus Anda uji sendiri.

Nominee = masuk voting; Honorable Mention = skor juri minimal 6,5; SOTD = skor tertinggi pada hari penilaian. Penghargaan membantu menemukan referensi visual, namun tidak membuktikan performa Core Web Vitals atau aksesibilitas tanpa audit sendiri.

Pola Animasi dari Contoh Website

Dari sepuluh situs tadi, motion yang paling sering muncul: scroll-driven storytelling, reveal teks bertahap, pin section saat narasi panjang, parallax berlapis, entrance hero, motion path SVG, transisi scene WebGL, dan showcase produk. Tujuannya bukan meniru efek 1:1, melainkan mengenali building block—Timeline untuk urutan, ScrollTrigger untuk scrub/pin, SplitText untuk koreografi huruf, plugin SVG untuk garis dan morph.

Setelah pola itu terlihat, bandingkan ke contoh design layout website modern dan premium bila Anda merancang grid tipografi sebelum menambah animasi.

Apa Itu GSAP?

GSAP (GreenSock Animation Platform) menginterpolasi nilai properti DOM, SVG, atau objek JavaScript arbitrary selama durasi tertentu. Inti API: Tween (satu transisi) dan Timeline (rantai transisi). Sedangkan runtime-nya, GSAP berjalan di vanilla JS, React, Vue, WordPress, Webflow, dan stack bundler modern.

Webflow mengakuisisi GreenSock pada 2024. Sejak 30 April 2025, GSAP dan plugin yang dulu berada di Club GSAP dapat digunakan gratis untuk use case komersial menurut pengumuman Webflow, dengan syarat GSAP Software License Agreement—jangan menyebut “open source” kecuali lisensi resmi memakai label itu.

Walaupun biaya lisensi turun, kompleksitas implementasi tetap sama; jangan menambah plugin hanya karena aksesnya gratis.

GSAP Dipakai untuk Apa?

Berikut use case yang sering muncul: hero entrance, fade/slide/scale, stagger kartu atau menu, text reveal, parallax, horizontal scroll, pin section, animasi stroke SVG, page transition, micro-interaction kursor, hingga tween posisi kamera Three.js. Tetapi GSAP bukan renderer 3D: Three.js/WebGL menggambar frame; GSAP mengubah uniform, posisi, atau progress timeline scene.

Cara Memasang GSAP

Sebelum menulis kode animasi, pasang library-nya. Via CDN (cek versi stabil di dokumentasi instalasi):

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

Apabila proyek memakai bundler, gunakan NPM untuk Vite/React/Next.js:

npm install gsap

import { gsap } from "gsap";

Di WordPress, enqueue script lewat tema atau plugin custom; load hanya di template yang butuh motion agar halaman blog tetap ringan.

Memahami Tween dan Metode to/from

Pertama, pahami Tween sebagai unit yang mengubah property target dari nilai awal ke akhir. Contoh dasar:

gsap.to(".box", {
  x: 200,
  duration: 1
});

gsap.to() animasi dari state sekarang ke target. Lalu gsap.from() mulai dari nilai yang Anda set lalu kembali ke state normal—berguna untuk reveal. Apabila CSS awal tidak bisa diandalkan, gsap.fromTo() mengunci awal dan akhir eksplisit.

Namun, jangan campur from() pada elemen yang CSS-nya sudah animasi transition browser—state awal jadi sulit diprediksi.

Timing, Easing, dan Stagger

Untuk timing, duration (detik), delay, repeat (gunakan -1 untuk loop), dan yoyo: true bekerja bersama repeat. Nilai ease seperti power2.out mengatur percepatan; daftar lengkap ada di docs GSAP.

gsap.from(".card", {
  opacity: 0,
  y: 30,
  duration: 0.6,
  stagger: 0.15
});

Stagger memberi jeda antar target; Anda tidak perlu menulis puluhan tween identik—pola yang terlihat di ACME Cups dan Moto Finance.

Jadi, latihan stagger satu baris di devtools lebih cepat daripada meniru seluruh hero EDOLUS.

Timeline dan ScrollTrigger

Jadi, Timeline mengurutkan tween, overlap, dan sequence kompleks:

const tl = gsap.timeline();
tl.from(".title", { y: 30, opacity: 0, duration: 0.6 })
  .from(".intro", { y: 20, opacity: 0, duration: 0.5 }, "-=0.2")
  .from(".cta", { scale: 0.9, opacity: 0, duration: 0.4 });

Kemudian, parameter posisi seperti "<", ">", "-=0.3", dan "+=0.5" mengatur relasi waktu antar tween. Instance tween/timeline bisa play(), pause(), reverse(), seek(), atau kill() saat navigasi SPA berubah.

Untuk scroll, ScrollTrigger (dokumentasi ScrollTrigger) menghubungkan animasi ke posisi halaman: trigger viewport, scrub: true, pin: true, snap, dan callback arah scroll.

Kemudian, registrasikan plugin sebelum tween pertama yang memakai scroll:

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

gsap.to(".box", {
  x: 300,
  scrollTrigger: {
    trigger: ".box",
    start: "top 80%",
    scrub: true
  }
});

Plugin Teks, SVG, dan WebGL

SplitText memecah teks jadi char/word/line untuk stagger—bukan satu-satunya cara; container teks tetap bisa dianimasikan dengan opacity/transform. DrawSVG dan MorphSVG relevan untuk garis dan shape (lihat White Desert, bleibtgleich). MotionPathPlugin menggerakkan elemen sepanjang path. Observer menangani gesture wheel/touch; ScrollSmoother menambah smooth scroll berbasis ScrollTrigger—cek status dan import di docs sebelum publish.

Andaikan Anda baru migrasi dari CSS keyframes, mulailah dari SplitText atau DrawSVG hanya setelah Tween dasar stabil—urutan belajar itu terlihat jelas di contoh White Desert dan bleibtgleich.

Pada stack React/Next, bersihkan tween saat component unmount agar ScrollTrigger tidak menumpuk listener—topik terkait rendering client-side dibahas di JavaScript SEO dan client-side rendering.

GSAP vs CSS Animation

Meski CSS animation dan transition cukup untuk hover, fade kecil, dan keyframes sederhana, GSAP unggul saat timeline panjang, stagger runtime, scrub scroll, callback, SVG plugin, dan sinkronisasi banyak elemen. Keduanya bisa hidup berdampingan: CSS untuk micro-interaction statis, GSAP untuk narasi scroll seperti contoh Awwwards di atas.

GSAP di WordPress

Di WordPress, CMS hanya menyajikan HTML; animasi tetap jalan di browser. Enqueue contoh (pin versi di produksi, jangan biarkan @latest tanpa audit):

wp_enqueue_script(
    'gsap',
    'https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js',
    array(),
    '3.12.5',
    true
);

Builder yang mengizinkan custom script (Oxygen, block theme child) bisa memuat GSAP per halaman landing. Namun motion berat tetap membebani LCP bila script blocking—urutkan dependency dan uji mobile. Panduan LCP WordPress relevan di cek LCP WordPress, cache, CDN, dan font.

Performa dan Reduced Motion

Lantaran beban animasi bergantung jumlah node, property yang diubah, filter/blur, ukuran DOM, jumlah ScrollTrigger, asset WebGL, dan perangkat pengguna—not fixed FPS dari library.

Maka, prioritaskan transform dan opacity; hindari animasi width/height massal; lazy-init scene kompleks; profil di Chrome Performance.

Sebagian pengguna mengaktifkan reduced motion; maka nonessential motion sebaiknya dinonaktifkan:

@media (prefers-reduced-motion: reduce) {
  .hero-motion { animation: none !important; }
}

GSAP bisa matchMedia untuk mematikan ScrollTrigger berat di viewport sempit—selaras prinsip mobile first saat motion diuji di layar kecil.

Tetapi jangan menunggu launch untuk tes perangkat rendah; profil scroll di ponsel mid-range lebih jujur daripada desktop developer.

Kesalahan Pemula dan Kapan Tidak Perlu GSAP

Motion berlebihan, durasi terlalu panjang, ratusan ScrollTrigger tanpa alasan, campur aduk Tween vs Timeline, lupa kill() di SPA, mengabaikan mobile, atau memakai animasi untuk menutupi UX lambat—semua kerap muncul di audit.

Namun, GSAP berlebihan bila kebutuhan hanya transition: transform .2s ease pada tombol.

Sebelum menambah plugin premium, pastikan Tween dan Timeline dasar sudah terbaca tim desain dan dev.

FAQ GSAP

Apa itu GSAP? Library JavaScript untuk animasi berbasis waktu dengan Tween dan Timeline.

Apakah GSAP gratis? Ya untuk use case luas sejak April 2025; namun tetap patuhi license agreement resmi.

Apakah GSAP butuh jQuery? Tidak.

ScrollTrigger itu apa? Plugin GSAP untuk animasi dan callback terikat scroll.

GSAP dengan React? Bisa; tetap perhatikan cleanup effect saat unmount.

GSAP dengan Three.js? Bisa tween property scene; rendering tetap di Three.js.

GSAP di mobile? Bisa, asalkan motion diuji dan dikurangi bila perlu.

Setelah memetakan contoh web GSAP dari Awwwards, pilih satu pola—scroll scrub sederhana dulu—implementasikan Tween plus ScrollTrigger di staging, ukur performa, lalu tambah kompleksitas hanya bila UX benar-benar butuh.

Akhirnya, keputusan desain dan disiplin performa menentukan kualitas motion, bukan jumlah plugin yang aktif.