Motion — moony

One curve and three timings. Small elements move quickly, most motion uses the base timing, and larger moments move slowly.

Prinsip

Tiga kebiasaan mendasari setiap gerakan. Animasi baru yang mengikuti kebiasaan ini akan terasa konsisten dengan brand.

Jelas

Setiap gerakan punya alasan: menunjukkan dari mana sesuatu berasal atau ke mana ia menuju.

Terarah

Gerakan mengarahkan perhatian ke hal yang penting, lalu mereda.

Konsisten

Momen sejenis selalu bergerak dengan cara yang sama.

Kurva

Easing khas dan tiga timing, dengan nilai yang bisa langsung ditempel ke tool kamu.

Signature — Arrive

cubic-bezier(0.2, 0, 0, 1)

Fast 170ms · small thingsBase 360ms · most movesSlow 660ms · big moments

Fades take about 50% of the move they go with.

Kode untuk

Nilai yang sama, dalam format yang dikenali tool kamu.

Copy for

:root {
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 250ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
}

.element {
  transition: transform var(--duration-base) var(--ease-exit);
}

Penerapan

Kurva yang diterapkan pada komponen di tiap layar.

In use

Toggle

Switching on and off. Fast · 170ms

Carousel

Moving through a set. Base · 680ms

Modal

Asking for a decision. Slow · 440ms

Options

Edit

Duplicate

Delete

Opening from what you clicked. Base · 680ms

Continue

Button

Pressing a button. Fast · 170ms

Card

Lifting under the pointer. Fast · 170ms

Overview

Specs

Files

Tabs

Moving between views. Fast · 170ms

Logo

Arriving on screen. Slow · 440ms

Copy link⋮

Tooltip

Explaining on hover. Fast · 170ms

Saat reduced motion diaktifkan, setiap gerakan menjadi fade singkat. Tidak ada yang berpindah, berputar, atau berubah skala.

Lakukan dan hindari

Kasus yang muncul di hampir setiap layar.

Kemunculan

Lakukan

Fade in, lalu menetap mengikuti kurva kita.

Jangan

Memantul, melenting, atau overshoot.

Menunggu

Lakukan

Bergerak begitu pekerjaan selesai.

Jangan

Menahan siapa pun agar animasi sempat selesai.

Kenyamanan

Lakukan

Saat reduced motion aktif, ganti setiap gerakan dengan fade singkat.

Jangan

Mengguncang, mengedip, atau memutar bagian besar layar.