Cara menggunakan Generator Cubic Bezier
- Seret dua handle ungu untuk membentuk kurva, atau ketik keempat angkanya.
- Tekan Play untuk mengadu kurvamu dengan easing standar seperti
ease. - Untuk gerakan yang terasa fisik, pilih Spring atau Bounce, lalu atur kekakuan, redaman, atau pantulan.
- Salin nilainya untuk CSS, Tailwind, Web Animations API, Framer Motion, atau GSAP.
Apa itu easing cubic-bezier?
Kurva easing memetakan waktu (sumbu x) ke progres (sumbu y). cubic-bezier(x1, y1, x2, y2) mendeskripsikan kurva itu dengan dua titik kontrol, sementara titik awal (0,0) dan titik akhir (1,1) bersifat tetap. Kurva yang naik cepat terasa tajam (ease-out), kurva yang mulai landai terasa berat (ease-in), dan nilai y di atas 1 atau di bawah 0 menghasilkan overshoot untuk efek “back” yang atraktif. Nilai x harus tetap di antara 0 dan 1.
Easing mana yang sebaiknya dipakai?
| Gerakan | Easing | Alasan |
|---|---|---|
| Elemen yang masuk ke layar | ease-out (misalnya cubic-bezier(.16,1,.3,1)) | Datang dengan cepat, lalu mendarat dengan halus |
| Elemen yang keluar | ease-in | Makin cepat saat meninggalkan layar |
| Gerakan di dalam layar | ease-in-out | Mulai dan berhenti terasa alami |
| UI yang atraktif, toggle | back / spring | Overshoot kecil membuat UI terasa hidup |
| Progress bar, spinner | linear | Kecepatan konstan |
Spring dan bounce dengan linear()
Cubic-bezier hanya bisa overshoot satu kali. Spring sungguhan bergoyang beberapa kali, dan bola memantul berulang kali di lantai. Efek seperti ini membutuhkan fungsi CSS linear(), yaitu daftar nilai progres yang dihubungkan browser dengan garis lurus. Tool ini mensimulasikan spring (kekakuan, redaman, massa) atau bola memantul, lalu mengambil sampel hasilnya menjadi linear(), beserta durasi yang dibutuhkan gerakan hingga berhenti. linear() didukung di Chrome dan Edge 113+, Firefox 112+, dan Safari 17.2+. Untuk browser lama, gunakan cubic-bezier sebagai fallback.
Gunakan kurvamu di generator animasi CSS atau untuk loader di generator loader CSS.
Juga dicari sebagai: easing css, cubic-bezier css, fungsi easing, animasi spring css, linear() easing, generator easing css, kurva bezier css.
Tool yang cocok dipakai bersama Generator Cubic Bezier
- Generator CSS Keyframes — Editor visual untuk @keyframes.
- Generator Animasi Hover CSS — Rancang animasi hover untuk tombol, kartu, tautan, dan ikon.
- Kalkulator clamp() — Masukkan ukuran minimum dan maksimum serta rentang viewport, lalu dapatkan nilai clamp() yang ramah zoom dengan penjelasan perhitungannya, pratinjau langsung, dan skala tipografi atau spasi fluid yang lengkap.
- Generator Gradient CSS — Rancang gradient secara visual — geser titik warna, ubah sudut atau jenisnya, mulai dari preset — lalu salin CSS siap pakai dengan warna solid sebagai fallback.
Pertanyaan yang sering diajukan
Apakah nilai y boleh lebih dari 1 atau kurang dari 0?
Bagaimana cara memakai cubic-bezier di Tailwind?
ease-[cubic-bezier(0.16,1,0.3,1)], atau tambahkan ke theme.extend.transitionTimingFunction. Panel output menampilkan keduanya.