Tailwind UI Pattern Registry for humans and agents

slide entrance motion direction transition slide in sidebar or drawer from left horizontal panel entrance animation off-canvas menu animation panel or card needs to slide in from the side sidebar or drawer needs an entrance transition content should enter from a specific direction

Slide In

Fetch snippet JSON: curl https://webspire.de/snippets/animations/slide-in.json
Format
Slide In
←

From left

Useful for drawers, side panels and supporting surfaces entering the viewport.

Slide In

From right

→

Works well for notifications, inspectors and contextual UI entering with direction.

Stage Background
Customize

Quick Start

<aside class="animate-slide-in-left">Sidebar content</aside>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
920 bytes · 46 lines
Custom Properties
--anim-duration
Classes
.animate-slide-in-left.animate-slide-in-right.animate-slide-in-bottom
Dependencies
easing/tokens
slide entrance motion direction transition

Directional entrance animations with a professional deceleration curve. Elements travel 2rem before settling into position. Three directions: .animate-slide-in-left, .animate-slide-in-right, .animate-slide-in-bottom.

<aside class="animate-slide-in-left fixed inset-y-0 left-0 z-40
              w-64 border-r border-white/10 bg-zinc-950
              flex flex-col px-4 py-6">
  <span class="text-lg font-bold text-white px-3 mb-6">App</span>
  <nav class="flex flex-col gap-1">
    <a class="rounded-lg px-3 py-2.5 text-sm text-white
              bg-white/10 font-medium" href="#">Dashboard</a>
    <a class="rounded-lg px-3 py-2.5 text-sm text-white/60
              hover:text-white hover:bg-white/5
              transition-colors" href="#">Analytics</a>
    <a class="rounded-lg px-3 py-2.5 text-sm text-white/60
              hover:text-white hover:bg-white/5
              transition-colors" href="#">Settings</a>
  </nav>
</aside>

Notification panel from right

<div class="animate-slide-in-right fixed inset-y-0 right-0 z-40
            w-80 border-l border-white/10 bg-zinc-950 p-6">
  <h2 class="text-lg font-semibold text-white mb-4">
    Notifications
  </h2>
  <!-- notification items -->
</div>