Foundations/Sistem Gerak & Animasi (Motion)

Sistem Gerak & Animasi (Motion)

● Ready Web Nuxt 4 + Mobile React Native

Animasi di Zenko bersifat organik, responsif, dan purposeful. Menggunakan kurva bezier khusus untuk menghasilkan gerakan yang tegas di awal dan mendarat dengan lembut.

1. Easing Curve Standard

--ease-smooth: cubic-bezier(0.22, 1, 0.36, 1)

Simulasi Reduced Motion

Fade + Rise (Reveal)

zenko-reveal

Horizontal Slide

➔

zenko-reveal-x

Checkmark Pop (Scale)

✓

zenko-draw

Horizontal Bar Wipe

zenko-grow

Vertical Column Chart

zenko-grow-y

Light Sheen Sweep

Zenko Tile

anim-sheen

2. Aksesibilitas: Dukungan Prefers Reduced Motion

Jika pengguna menyalakan fitur "Reduce Motion" pada sistem operasi, seluruh animasi perulangan dinonaktifkan dan elemen dikunci langsung pada posisi resting state.

Reduced Motion Rule

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}