text reveal rise entrance headline clip overflow hero headline entrance animation section title reveal on scroll staggered text block appearance text appearing abruptly on page load need elegant text entrance without JS animation library want clipped reveal effect for headlines
Text Line Rise
Fetch snippet JSON:
curl https://webspire.de/snippets/animations/text-line-rise.json Typography rises
into view
Each child element slides up from behind its overflow clip independently.
Add .is-visible via IntersectionObserver to trigger.
Background
Customize
Quick Start
<div class="text-line-rise is-visible"><h1>Hello</h1></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 533 bytes · 27 lines
- Custom Properties
-
--rise-distance--rise-speed--rise-easing - Classes
-
.text-line-rise
text reveal rise entrance headline clip overflow
Text rises from below into an overflow: hidden parent container. Add .is-visible via Intersection Observer or on load. Children can be staggered with transition-delay.
Headline reveal
<div class="text-line-rise is-visible">
<h1 class="text-5xl font-bold">Welcome to the future</h1>
</div>Staggered multi-line
<div class="text-line-rise is-visible">
<h2 class="text-4xl font-bold" style="transition-delay: 0s">Line one</h2>
</div>
<div class="text-line-rise is-visible">
<p class="text-lg" style="transition-delay: 0.15s">Line two with delay</p>
</div>