Motion component

Slide in

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

Preview

Live preview

Element enters by sliding in from off-screen (left, right, top, or bottom).

Slide in

Authoritative vocabulary

Definition and close-term distinctions

English definitions are preserved verbatim from Animation Vocabulary; translations and distinctions help you choose precisely.

Canonical termslide-in

Slide in

滑入

Authoritative definition

Element enters by sliding in from off-screen (left, right, top, or bottom).

Chinese translation

元素从屏幕外沿左、右、上或下方滑入。

Browse all 91 terms

Design contract

Decide before this motion ships

Purpose, frequency, trigger, timing, interruptibility, and gesture rules shape the 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.

Output

Copy into your interface

Current parameters update visual-state CSS, semantic HTML, the required vanilla JS runtime, and an interaction prompt.

motion.css

.motion-demo.motion-demo--slide-in {
  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: 12px;
  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: 8px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 10px 28px rgb(0 0 0 / 7%);
}

.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: 7px;
  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: 7px;
  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: 8px; }
.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; }
}

Review notes

Pre-delivery review

Check that the entry direction matches the trigger's position.
Return focus to a sensible location after exit completes.

Accessibility

Keep information accessible

Reduced motion

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

Parameters

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.

Live preview

Definition and close-term distinctions

Slide in

Enter / Exit

Decide before this motion ships

Copy into your interface

Pre-delivery review

Keep information accessible

Parameter reference

Keep exploring