OnomaUI

gu motion

gu has 2 kinds of motion.

ぐっ2 motionsOfficial

Motion by meaning

Put in effort at once
Deeply moved

Put in effort at once

Press a confirm button

Shrinks by 18% on press, overshoots by 3%, then settles.

Duration
0.4s
Repeats
No
Easing
ease-out
Animates
Scale scale
Show CSS
@keyframes onoma-gu {
  0% { transform: scale(1, 1); }
  35% { transform: scale(0.82, 0.82); animation-timing-function: ease-out; }
  70% { transform: scale(1.03, 1.03); animation-timing-function: ease-in-out; }
  100% { transform: scale(1, 1); }
}

.onoma-gu {
  animation: onoma-gu 0.4s ease-out both;
}

/* Reduced motion: no motion */
@media (prefers-reduced-motion: reduce) {
  .onoma-gu { animation: none; }
}
Try with my objectUse the code

Deeply moved

Moved / touched

Beats up to 120%, beats once more smaller, then settles.

Duration
0.8s
Repeats
No
Easing
ease-out
Animates
Scale scale
Show CSS
@keyframes onoma-gu-2 {
  0% { transform: scale(1, 1); }
  20% { transform: scale(1.2, 1.2); }
  40% { transform: scale(0.96, 0.96); }
  60% { transform: scale(1.08, 1.08); }
  100% { transform: scale(1, 1); }
}

.onoma-gu-2 {
  animation: onoma-gu-2 0.8s ease-out both;
}

/* Reduced motion: no motion */
@media (prefers-reduced-motion: reduce) {
  .onoma-gu-2 { animation: none; }
}
Try with my objectUse the code

Compare with similar motions

guPut in effort at once
dobadobaPour out in torrents
zaazaaHeavy rain pouring down