DIPERBARUI: 2026-11-06

[B2-M3]Menengah⏱ 35 Mnt Baca + 55 Mnt Praktik

Koreografi Scroll & Motion Terukur dengan GSAP dan Lenis

Membangun Transisi Halaman Halus di 60 FPS Tanpa Mengunci Scroll Pengguna

BAGIKAN MODUL:Dukung rekan developer & tim Anda

💬WHATSAPP inLINKEDIN 𝕏POST

[KONTRAK HASIL BELAJAR // B2-M3]Standar Kompetensi Industri

⏱ 35 Mnt Baca•⚡ 55 Mnt Praktik•Lulus: ≥ 80/100 Poin

01. Target Pembelajar & Prasyarat

Creative developer dan UI/UX engineer.

Prasyarat:Modul B2-M1: Model Mental React 19

02. Kompetensi Konseptual (Level 1–2)

✓Memahami interaksi inersia Lenis dan sinkronisasi requestAnimationFrame GSAP.

03. Kompetensi Praktis & Artefak Nyata (Level 3–4)

✓Membangun animasi pemicu scroll yang menghormati prefers-reduced-motion.

Artefak yang Dibangun: Skrip koreografi `smooth-scroll-scene.js`.

04. Aplikasi Nyata & Verifikasi

Penerapan Industri: Pengalaman scroll interaktif pada beranda Lusion Z-Automation.

Metode Verifikasi: Memeriksa FPS meter di browser dan mengaktifkan mode pengurangan gerak di pengaturan OS.

[BAGIAN 01 // MASALAH & URGENSI ARSITEKTURAL]

Mengapa Subjek Ini Krusial dalam Rekayasa Nyata?

Pelajari integrasi smooth scrolling Lenis dengan timeline GSAP, paralaks bermakna, dan penanganan ketat mode prefers-reduced-motion.

Dalam lingkungan produksi, kegagalan memahami batas-batas arsitektur sistem sering kali menyebabkan bug yang sulit dilacak, pemborosan biaya komputasi, atau antarmuka yang lambat bagi pengguna.

[BAGIAN 02 // MEKANISME DI BALIK LAYAR]

Bagaimana Sistem Sebenarnya Bekerja di Tingkat Protokol

Disiplin Gerak Berorientasi Tujuan

Gerak di web Z-Automation bukan hiasan. Gerak adalah penjelas hubungan ruang. Saat pengguna menggulir, kita menggunakan properti GPU murni (`transform` dan `opacity`) untuk mengarahkan pandangan ke informasi berikutnya.

[DIAGRAM TEKNIS SVG INTERAKTIF // DIAG-02]

Alur Arsitektur Sistem Otonom & Runtime

LANGKAH 1 DARI 4

ENTITAS AKTIF:User -> Sistem

Pesan bahasa alami diterima melalui antarmuka web atau webhook chat.

[LIVE PAYLOAD INSPECTOR]JSON 2026

{
  "input": "Berapa estimasi biaya pembuatan landing page bisnis?"
}

[BAGIAN 03 // MATRIKS KESALAHPAHAMAN]

Koreksi Asumsi Umum vs Realitas Rekayasa

×ASUMSI KELIRU

“Smooth scrolling harus membajak scroll wheel secara agresif.”

✓REALITAS SISTEM

Smooth scrolling modern (seperti Lenis) mempertahankan perilaku scroll native dan hanya menstabilkan inersia.

[BAGIAN 04 // LABORATORIUM PRAKTIS & KODE]

Implementasi Langkah-demi-Langkah

Hasil akhir yang diharapkan: Inisialisasi Lenis yang tersinkronisasi dengan requestAnimationFrame.

STRUKTUR PROYEK DIREKOMENDASIKAN:

lab-b2-m3/
└── scroll.js

1Inisialisasi Lenis Bersih

Loop sinkronisasi animasi.

scroll.js•javascript

✓Tested Successfully

LINGKUNGAN TERUJI: Lenis v1.3.2714 BARIS KODE

1	// scroll.js
2	import Lenis from 'lenis';
3
4	const lenis = new Lenis({
5	duration: 1.2,
6	easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
7	smoothWheel: true
8	});
9
10	function raf(time) {
11	lenis.raf(time);
12	requestAnimationFrame(raf);
13	}
14	requestAnimationFrame(raf);

KEPUTUSAN ARSITEKTURAL UTAMA:

• Menggunakan Lenis raf loop: Memastikan kalkulasi posisi scroll seirama dengan refresh rate monitor.

PERINTAH EKSEKUSI TERMINAL:

$ Diuji pada template lusion_body.html.

OUTPUT YANG DIHARAPKAN:

Scroll inersia halus tanpa jitter.

[BAGIAN 05 // PANDUAN TROUBLESHOOTING & TANTANGAN]

Mengantisipasi Masalah Umum & Tantangan Ekstensi

Pesan Error: Scroll bergetar (jitter)

Penyebab: Ada pemanggilan scrollRestoration yang berbenturan

Solusi Eksak: Set history.scrollRestoration = 'manual'.

⚡ TANTANGAN EKSTENSI MANDIRI:

Hentikan loop Lenis saat prefers-reduced-motion aktif.

[RUBRIK EVALUASI KOMPETENSI 100 POIN // B2-M3]

Uji Kompetensi Mandiri & Verifikasi Hasil

Standar kelulusan Z-Automation mewajibkan skor minimum 80 / 100 Poin dengan komponen Implementasi Praktis minimal 21 / 35 Poin (60%). Jawab soal diagnostik dan centang hasil pengujian praktis Anda.

BAGIAN A // PERTANYAAN DIAGNOSTIK KONSEPTUAL & TEKNIS (40 POIN)

01.Mengapa kita wajib mematikan animasi gerak kompleks saat media query '(prefers-reduced-motion: reduce)' aktif?

Untuk menghormati preferensi pengguna dengan gangguan vestibular yang rentan mengalami mual akibat gerakan layar berlebih.

Agar browser tidak kehabisan memori RAM.

BAGIAN B // DAFTAR PERIKSA HASIL IMPLEMENTASI PRAKTIS (35 POIN — MIN. 21 POIN)

Centang item di bawah ini hanya jika Anda telah menjalankan kode di komputer Anda dan mengamati output yang benar:

Loop RAF berjalan mulus di 60 FPS+25 Poin

← MODUL SEBELUMNYA[B2-M2] Next.js App Router: Server vs Client Components, Routing & SSR Metadata MODUL SELANJUTNYA →[B2-M4] Pengantar 3D WebGL di Browser: Three.js Scene, Kamera & GLTF