slide-in

Slide in

Bring content in from a clear direction so its spatial relationship stays legible.

Preview

A positional transition moves content from beyond an edge into its resting location.

Slide in

Implement Slide in: Bring content in from a clear direction so its spatial relationship stays legible. Use Duration 240ms, Distance 28px, Direction up, Delay 0ms, Easing soft. Trigger it once when state changes and keep it replayable. Use semantic HTML, scope CSS to .motion-demo--slide-in. Provide equivalent low-motion behavior for prefers-reduced-motion and .force-reduced-motion.

markup.html

<div class="motion-demo motion-demo--slide-in" data-motion="slide-in" aria-label="Slide in demo">
  <article class="motion-surface">
    <strong>Slide in</strong>
    <span class="motion-line"></span>
    <span class="motion-line"></span>
  </article>
</div>

motion.css

.motion-demo.motion-demo--slide-in {
  box-sizing: border-box;
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 34rem);
  min-height: 15rem;
  padding: 2rem;
  overflow: hidden;
  color: #18181b;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  isolation: isolate;
}

.motion-demo.motion-demo--slide-in *, .motion-demo.motion-demo--slide-in *::before, .motion-demo.motion-demo--slide-in *::after {
  box-sizing: border-box;
}

.motion-demo.motion-demo--slide-in .motion-surface {
  position: relative;
  display: grid;
  gap: 0.65rem;
  width: min(100%, 18rem);
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  box-shadow: none;
}

.motion-demo.motion-demo--slide-in .motion-surface strong { font-weight: 500; }

.motion-demo.motion-demo--slide-in .motion-line {
  display: block;
  width: 100%;
  height: 0.5rem;
  background: #e4e4e7;
  border-radius: 999px;
}

.motion-demo.motion-demo--slide-in .motion-line:last-child { width: 62%; }

.motion-demo.motion-demo--slide-in .motion-button {
  position: relative;
  min-height: 2.75rem;
  padding: 0.75rem 1.1rem;
  color: white;
  font: inherit;
  font-weight: 700;
  background: #18181b;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.motion-demo.motion-demo--slide-in .motion-button:focus-visible { outline: 3px solid rgb(37 99 235 / 32%); outline-offset: 3px; }

.motion-demo.motion-demo--slide-in .motion-action-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.motion-demo.motion-demo--slide-in .motion-replay-scene {
  width: min(100%, 22rem);
  display: grid;
  place-items: center;
}

.motion-demo.motion-demo--slide-in .motion-pausable-scene {
  width: min(100%, 22rem);
  display: grid;
  place-items: center;
}

.motion-demo.motion-demo--slide-in button.motion-surface {
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.motion-demo.motion-demo--slide-in .motion-replay-button,
.motion-demo.motion-demo--slide-in .motion-undo-button,
.motion-demo.motion-demo--slide-in .motion-dismiss-button,
.motion-demo.motion-demo--slide-in .motion-pause-button {
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  color: #18181b;
  font: 650 0.78rem/1 ui-sans-serif, system-ui, sans-serif;
  background: #ffffff;
  border: 1px solid #d4d4d8;
  border-radius: 8px;
  cursor: pointer;
}

.motion-demo.motion-demo--slide-in .motion-replay-button:focus-visible,
.motion-demo.motion-demo--slide-in .motion-undo-button:focus-visible,
.motion-demo.motion-demo--slide-in .motion-dismiss-button:focus-visible,
.motion-demo.motion-demo--slide-in .motion-pause-button:focus-visible,
.motion-demo.motion-demo--slide-in [data-reorder-item]:focus-visible,
.motion-demo.motion-demo--slide-in [data-swipe-target]:focus-visible {
  outline: 3px solid rgb(37 99 235 / 32%);
  outline-offset: 3px;
}

.motion-demo.motion-demo--slide-in .motion-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.motion-demo.motion-demo--slide-in .motion-ripple-ink {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background: rgb(255 255 255 / 72%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
}

.motion-demo.motion-demo--slide-in .motion-state-stack { position: relative; width: min(100%, 18rem); height: 9rem; }
.motion-demo.motion-demo--slide-in .motion-state { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: #ffffff; border: 1px solid #e4e4e7; border-radius: 16px; }
.motion-demo.motion-demo--slide-in .motion-state--to { background: #18181b; color: white; }

.motion-demo.motion-demo--slide-in .motion-scroll-track > span { color: #71717a; font: 600 0.72rem/1.2 ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.motion-demo.motion-demo--slide-in .motion-orbit-item { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: white; background: #2563eb; border-radius: 50%; }
.motion-demo.motion-demo--slide-in .motion-text-stack { position: relative; width: min(100%, 18rem); min-height: 4rem; }
.motion-demo.motion-demo--slide-in svg { width: min(100%, 20rem); height: auto; }

.motion-demo.motion-demo--slide-in .motion-surface { animation: motion-slide-in 240ms cubic-bezier(0.23, 1, 0.32, 1) 0ms both; will-change: transform, opacity; }
@keyframes motion-slide-in {
  from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; }
}

@keyframes motion-slide-in-reduced-fade {
  from { opacity: 0.84; }
  to { opacity: 1; }
}

.force-reduced-motion .motion-demo.motion-demo--slide-in {
  animation: motion-slide-in-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}

.force-reduced-motion .motion-demo.motion-demo--slide-in *,
.force-reduced-motion .motion-demo.motion-demo--slide-in *::before,
.force-reduced-motion .motion-demo.motion-demo--slide-in *::after {
  animation: none !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-property: opacity, color, background-color, border-color !important;
  transition-duration: 160ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

.force-reduced-motion .motion-demo.motion-demo--slide-in .motion-button,
.force-reduced-motion .motion-demo.motion-demo--slide-in [data-reorder-item],
.force-reduced-motion .motion-demo.motion-demo--slide-in [data-swipe-target],
.force-reduced-motion .motion-demo.motion-demo--slide-in [data-spring-target] {
  transform: none !important;
}

.force-reduced-motion .motion-demo.motion-demo--slide-in .motion-path { stroke-dashoffset: 0 !important; }
.force-reduced-motion .motion-demo.motion-demo--slide-in .motion-word--from { opacity: 0 !important; visibility: hidden; }
.force-reduced-motion .motion-demo.motion-demo--slide-in .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .motion-demo.motion-demo--slide-in {
    animation: motion-slide-in-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
  }

  .motion-demo.motion-demo--slide-in *, .motion-demo.motion-demo--slide-in *::before, .motion-demo.motion-demo--slide-in *::after {
    animation: none !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color !important;
    transition-duration: 160ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .motion-demo.motion-demo--slide-in .motion-button,
  .motion-demo.motion-demo--slide-in [data-reorder-item],
  .motion-demo.motion-demo--slide-in [data-swipe-target],
  .motion-demo.motion-demo--slide-in [data-spring-target] {
    transform: none !important;
  }

  .motion-demo.motion-demo--slide-in .motion-path { stroke-dashoffset: 0 !important; }
  .motion-demo.motion-demo--slide-in .motion-word--from { opacity: 0 !important; visibility: hidden; }
  .motion-demo.motion-demo--slide-in .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }
}

Learn more

Before implementation

Purpose: Use direction to explain where content came from and how it relates spatially to the current layout.
Frequency: Use for low- to medium-frequency drawers, panels, and layered navigation; prefer shorter fades for frequent feedback.
Trigger: Trigger when opening a panel, adding content, or entering deeper navigation, with direction matching the source.
Enter / exit: Enter from the source direction; exit along the reverse path with a clear destination.
Interruptibility: A reversing action takes over at the current position and changes direction immediately.
Gesture and keyboard: Gesture-driven panels follow the pointer and settle after a threshold; button-opened panels keep click and keyboard parity.
Reduced-motion strategy: Remove large travel and keep a short fade with a clear layer boundary.

Accessibility

Reduced motion

Remove large travel and keep a short fade with a clear layer boundary.

Parameter reference

Parameter	Range / options	Default	Purpose
`duration`	80ms–1200ms	240ms	Controls the time required for one motion cycle.
`distance`	0px–120px	28px	Controls how far the element travels.
`direction`	Up / Down / Left / Right / Exit	Up	Selects direction.
`delay`	0ms–600ms	0ms	Controls the wait before motion begins.
`ease`	Soft / Snap / Calm / Linear	Soft	Controls how velocity changes over time.