Membangun UI Indah dengan Animasi GSAP

<h2>Mengapa GSAP?</h2><p>GSAP adalah standar emas untuk animasi web. Cepat, andal, dan berfungsi di semua browser utama. Tidak seperti animasi CSS, GSAP memberi Anda kontrol yang tepat atas rangkaian animasi kompleks.</p><h2>Memulai</h2><pre><code>npm install gsap\nimport gsap from "gsap";\nimport { ScrollTrigger } from "gsap/ScrollTrigger";\ngsap.registerPlugin(ScrollTrigger);</code></pre><h2>Animasi Terpicu Gulir</h2><p>Salah satu pola paling populer adalah mengungkapkan elemen saat pengguna menggulir halaman ke bawah. Dengan ScrollTrigger, ini menjadi sepele:</p><pre><code>gsap.from(".section-reveal", {\n y: 50,\n opacity: 0,\n duration: 0.8,\n scrollTrigger: {\n trigger: ".section-reveal",\n start: "top 85%",\n },\n});</code></pre><h2>Tips Kinerja</h2><ul><li>Selalu animasikan properti <code>transform</code> dan <code>opacity</code> untuk akselerasi GPU</li><li>Gunakan <code>will-change</code> seperlunya</li><li>Bersihkan animasi di React dengan <code>gsap.context()</code></li></ul>