OnomaUI

garagara motion

garagara has 2 kinds of motion.

がらがら2 motionsOfficial

Motion by meaning

Rattle and clack
Collapse with a clatter

Rattle and clack

Playful rattle toy

Rattles 5% and 12° side to side, forever.

Duration
0.36s
Repeats
Yes
Easing
linear
Animates
Position · Rotation translate rotate
Show CSS
@keyframes onoma-garagara {
  0% { transform: translate(0%, 0%) rotate(0deg); }
  25% { transform: translate(5%, 0%) rotate(-12deg); }
  50% { transform: translate(0%, 0%) rotate(0deg); }
  75% { transform: translate(-5%, 0%) rotate(12deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}

.onoma-garagara {
  animation: onoma-garagara 0.36s linear infinite both;
}

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

Collapse with a clatter

List collapses away

Trembles, then crumbles 300% downward and disappears.

Duration
1.4s
Repeats
No
Easing
ease-in
Animates
Position · Rotation · Opacity translate rotate opacity
Show CSS
@keyframes onoma-garagara-2 {
  0% { transform: translate(0%, 0%) rotate(0deg); opacity: 1; }
  8% { transform: translate(-2%, 0%) rotate(0deg); opacity: 1; }
  16% { transform: translate(2%, 0%) rotate(0deg); opacity: 1; }
  24% { transform: translate(-1.5%, 0%) rotate(0deg); opacity: 1; }
  32% { transform: translate(0%, 0%) rotate(0deg); opacity: 1; }
  80% { transform: translate(0%, 211.76%) rotate(35.29deg); opacity: 1; }
  100% { transform: translate(0%, 300%) rotate(50deg); opacity: 0; }
}

.onoma-garagara-2 {
  animation: onoma-garagara-2 1.4s ease-in both;
}

/* Reduced motion: only fade out */
@keyframes onoma-garagara-2-fade { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .onoma-garagara-2 { animation: onoma-garagara-2-fade 0.2s ease-out both; }
}
Try with my objectUse the code

Compare with similar motions

garagaraRattle and clack
dokaPlonk down heavily
shutaLand nimbly