Animation · Transitions · 13

Drawer Slide

Drawer Slide = a panel that slides in from the edge to layer a secondary view over the page without a hard cut.

Respects prefers-reduced-motion: the animation is disabled and the final state is shown.

How to prompt it

Slide a drawer from the right edge: translateX(100% to 0) over 300ms with a soft easing, plus a fading scrim, transform and opacity only.

Open the drawer from the left instead, and shorten the easing to 240ms for a snappier feel.

Drive the drawer with a state class (open/closed) and CSS transitions, add focus trap + Esc-to-close, expose --drawer-width and --drawer-speed, and under prefers-reduced-motion replace the slide with a fade. Keep the panel off the main scroll.

Modify prompts change only the target — the rest of your page stays untouched.

What is a Drawer Slide?

A drawer slides a panel in from the side so a filter, menu, or detail appears without the page jumping to a new screen. Use transform: translateX only and a soft easing; pair it with a scrim that fades so the user knows the background is paused. Keep it under ~300ms or it feels sluggish.

Animation Specimen

Trigger: click
Tech: css
Duration: 2.4s
Easing: cubic-bezier(0.4, 0, 0.2, 1)
Performance: transform

When to use

Mobile nav, filters, detail panels, cart
Any secondary view that should layer, not navigate

Avoid when

Primary navigation on desktop — a full page is clearer
Without a scrim — the background feels frozen, not paused

Always pair the slide with a fading scrim so users know the background is paused, not gone.

Get the code

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.drawer-demo { width: min(240px, 100%); height: 150px; border-radius: 12px; overflow: hidden; position: relative; background: var(--surface-2, #eef0f5); border: 1px solid var(--border, #e6e7ec); }
.drawer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 62%;
  padding: 16px;
  background: var(--surface, #fff);
  border-left: 1px solid var(--border, #e6e7ec);
  box-shadow: -16px 0 30px -18px rgba(0, 0, 0, 0.3);
  animation-name: drawer;
  animation-duration: var(--anim-duration, 2.4s);
  animation-timing-function: var(--anim-easing, cubic-bezier(0.4, 0, 0.2, 1));
  font: 600 13px/1.5 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--ink, #1a1c22);
}
@keyframes drawer {
  0%, 15% { transform: translateX(110%); }
  35%, 75% { transform: translateX(0); }
  95%, 100% { transform: translateX(110%); }
}

<div class="drawer-demo"><div class="drawer anim-el">Menu</div></div>

Copy and drop it into your project. The motion touches only transform / opacity; colour comes from --anim-accent.

Drawer Slide

What is a Drawer Slide?

Animation Specimen

When to use

Avoid when

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns