clip-path reveal entrance directional inset mask animation section entrance animation image reveal from any direction progressive content unmasking standard fade-in feels generic need directional reveal without overflow tricks want clip-path based entrance from any side
Clip Reveal
Fetch snippet JSON:
curl https://webspire.de/snippets/animations/clip-reveal.json Hello, World
This element animates in
Background
Quick Start
<div class="clip-reveal-left">...</div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 901 bytes · 55 lines
- Classes
-
.clip-reveal-left.clip-reveal-right.clip-reveal-top.clip-reveal-bottom
clip-path reveal entrance directional inset mask animation
Four directional reveal animations using clip-path: inset(). The element is fully clipped from one side and animates to fully visible. Cleaner than overflow-hidden approaches since it doesn’t require a wrapper.
Reveal from left
<div class="clip-reveal-left">
<div class="h-48 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600"></div>
</div>All four directions
<div class="grid grid-cols-2 gap-4">
<div class="clip-reveal-left h-32 rounded-lg bg-blue-200"></div>
<div class="clip-reveal-right h-32 rounded-lg bg-emerald-200"></div>
<div class="clip-reveal-top h-32 rounded-lg bg-amber-200"></div>
<div class="clip-reveal-bottom h-32 rounded-lg bg-purple-200"></div>
</div>