7onicDESIGN SYSTEM

Animation

Animation tokens that unify enter/exit effects across components. All are named tokens, mapping directly to class names (animate-{name}) in a 1:1 relationship.

Enter Animations

Entry effects for Checkbox and Radio. Each token maps 1:1 to a class (animate-checkbox-enter).

opacity 0·scale 0.75→1
checkbox-enterCheckbox

Checkbox checkmark entry animation

opacity 0
+
scale 0.75 (75%)
+
duration micro (150ms)
+
easing ease-out
Tailwindanimate-checkbox-enter
opacity 0·scale 0.5→1
radio-enterRadio

Radio dot entry animation

opacity 0
+
scale 0.50 (50%)
+
duration micro (150ms)
+
easing ease-out
Tailwindanimate-radio-enter

Scale Comparison

Different scale values suited to each component's shape

Start scale
75%

Checkbox

Natural appearance from 75% scale — the checkmark fits neatly within bounds.

animate-checkbox-enter
Start scale
50%

Radio

Starting from 50% scale creates a 'pop' effect for an impactful appearance.

animate-radio-enter

Named Animations

Standalone animations specific to each component. Each animate-* class is self-contained.

Modal

2 enter/exit pairs

Enternormal (200ms)
animate-modal-overlay-enter

Overlay fade in

Exitfast (100ms)
animate-modal-overlay-exit

Overlay fade out

Enternormal (200ms)
animate-modal-content-enter

Content appear (opacity + scale + translateY)

Exitfast (100ms)
animate-modal-content-exit

Content exit

NavigationMenu

3 enter/exit pairs

Enternormal (200ms)
animate-fade-in

Fade in

Exitnormal (200ms)
animate-fade-out

Fade out

Entermicro (150ms)
animate-nav-viewport-enter

Viewport appear (opacity + scale + translateY)

Exitfast (100ms)
animate-nav-viewport-exit

Viewport exit

Enternormal (200ms)
animate-collapsible-down

Collapsible expand (height)

Exitnormal (200ms)
animate-collapsible-up

Collapsible collapse (height)

Accordion

1 enter/exit pair

Enternormal (200ms)
animate-accordion-down

Accordion expand (height)

Exitnormal (200ms)
animate-accordion-up

Accordion collapse (height)

Drawer

Slide in/out from screen edges

→
right
←
left
↑
top
↓
bottom
Enter
slow (300ms)
animate-drawer-*-enter
Exit
normal (200ms)
animate-drawer-*-exit

Tooltip

Tooltip appear/exit (opacity + translate 4px)

↑
top
↓
bottom
→
right
←
left
Enter
micro (150ms)
animate-tooltip-*-enter
Exit
fast (100ms)
animate-tooltip-*-exit

Popover

Popover appear/exit (opacity + translate 4px)

↑
top
↓
bottom
→
right
←
left
Enter
normal (200ms)
animate-popover-*-enter
Exit
fast (100ms)
animate-popover-*-exit

Toast

Toast slide in/out

→
right
←
left
↑
top
↓
bottom
Enter
slow (300ms)
animate-toast-slide-*-in
Exit
normal (200ms)
animate-toast-slide-*-out

Global

Infinite rotation (loading spinner)

animate-spin

Infinite rotation (loading spinner)

spin (1000ms)

Progress

Stripe flow animation (background-position)

animate-progress-stripe

Stripe flow animation (background-position)

spin (1000ms)

Spinner

3D Y-axis rotation (rotateY 0→360deg), Dot opacity pulse (opacity 0.2→1→0.2), Bar scale pulse (scaleY 0.4→1→0.4), Organic shape morph + 3D rotation (border-radius morph)

animate-spinner-orbit

3D Y-axis rotation (rotateY 0→360deg)

spin (1000ms)
animate-spinner-dot

Dot opacity pulse (opacity 0.2→1→0.2)

spin (1000ms)
animate-spinner-bar

Bar scale pulse (scaleY 0.4→1→0.4)

spin (1000ms)
animate-spinner-morph

Organic shape morph + 3D rotation (border-radius morph)

spin (1000ms)

Skeleton

Brightness pulse (opacity 1→0.4→1), Shimmer gradient sweep (translateX -100%→100%)

animate-skeleton-pulse

Brightness pulse (opacity 1→0.4→1)

spin (1000ms)
animate-skeleton-wave

Shimmer gradient sweep (translateX -100%→100%)

spin (1000ms)

Best Practices

✓

Do

  • ✓Quick feedback with short duration (micro=150ms)
  • ✓Natural deceleration using ease-out
  • ✓Rich transitions combining opacity + scale
  • ✓1:1 mapping with named classes
✕

Don't

  • ✗Micro-interactions over 300ms+
  • ✗Using ease-in for enter animations
  • ✗Hardcoded keyframes
  • ✗Ignoring prefers-reduced-motion