SlideUpTextAnimation

A scroll-triggered animation that reveals text with a smooth upward slide effect. Perfect for headlines, hero sections, and minimal content transitions that need visual impact.

✨ Features

Scroll-Triggered: Animates when text enters the viewport
Smooth Slide-Up: Clean upward motion with easeOut timing
Configurable Delay: Add delays for staggered text reveals
Play Once or Repeat: Choose whether animation repeats on re-scroll
Flexible Content: Works with any text or React elements
Viewport Detection: Uses precise intersection observer logic

📋 Prerequisites

This component requires:

Next.js (with App Router)
Tailwind CSS 4

🚀 Installation

npm install motion

📁 Files Included

The component bundle includes:

index.tsx - Main component
README.md - This documentation

🎯 Basic Usage

tsx.tsxTypeScript

1import { SlideUpTextAnimation } from './components/slide-up-text-animation';
2
3export default function HomePage() {
4    return (
5        <div className="min-h-screen">
6            <SlideUpTextAnimation>
7                <h1 className="text-6xl font-bold">Welcome to Our Site</h1>
8            </SlideUpTextAnimation>
9        </div>
10    );
11}

The text will slide up smoothly when it enters the viewport, creating an elegant reveal effect.

🔧 Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	`<span className="text-4xl">Your Text Here</span>`	Content to animate
`initialDelay`	`number`	`0`	Delay before animation starts (in seconds)
`playOnce`	`boolean`	`true`	Whether to animate only once or repeat on re-scroll
`className`	`string`	-	Additional CSS classes for the wrapper

📖 Examples

Hero Headline

tsx.tsxTypeScript

1<SlideUpTextAnimation>
2    <h1 className="text-7xl font-black bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
3        Innovation Starts Here
4    </h1>
5</SlideUpTextAnimation>

Staggered Text Reveals

tsx.tsxTypeScript

1<div className="space-y-8">
2    <SlideUpTextAnimation initialDelay={0}>
3        <h2 className="text-4xl font-bold">First Line</h2>
4    </SlideUpTextAnimation>
5
6    <SlideUpTextAnimation initialDelay={0.2}>
7        <h3 className="text-2xl text-gray-600">Second Line</h3>
8    </SlideUpTextAnimation>
9
10    <SlideUpTextAnimation initialDelay={0.4}>
11        <p className="text-lg">Final description appears last</p>
12    </SlideUpTextAnimation>
13</div>

Repeating Animation

tsx.tsxTypeScript

1<SlideUpTextAnimation playOnce={false}>
2    <div className="text-center">
3        <h2 className="text-5xl font-bold mb-4">Scroll Down & Up</h2>
4        <p className="text-xl text-gray-500">
5            This will animate every time you scroll past
6        </p>
7    </div>
8</SlideUpTextAnimation>

Complex Content

tsx.tsxTypeScript

1<SlideUpTextAnimation initialDelay={0.3} className="max-w-4xl mx-auto">
2    <div className="bg-white dark:bg-gray-900 p-12 rounded-2xl shadow-2xl">
3        <h2 className="text-4xl font-bold mb-6">About Our Company</h2>
4        <p className="text-lg leading-relaxed text-gray-600 dark:text-gray-300">
5            We create digital experiences that transform how people interact
6            with technology. Our mission is to build tools that empower
7            creativity and foster human connection.
8        </p>
9        <button className="mt-8 px-8 py-4 bg-blue-600 text-white rounded-lg font-semibold">
10            Learn More
11        </button>
12    </div>
13</SlideUpTextAnimation>

Multiple Paragraphs

tsx.tsxTypeScript

1<div className="prose prose-lg max-w-4xl mx-auto space-y-12">
2    <SlideUpTextAnimation>
3        <h1>The Future of Design</h1>
4    </SlideUpTextAnimation>
5
6    <SlideUpTextAnimation initialDelay={0.1}>
7        <p>
8            In today's digital landscape, the boundaries between physical and
9            virtual experiences continue to blur. We're entering an era where
10            design thinking must evolve to meet these new challenges.
11        </p>
12    </SlideUpTextAnimation>
13
14    <SlideUpTextAnimation initialDelay={0.2}>
15        <p>
16            Our approach combines traditional design principles with
17            cutting-edge technology to create experiences that feel both
18            familiar and revolutionary.
19        </p>
20    </SlideUpTextAnimation>
21</div>

🎭 Animation Behavior

Trigger Point

Animation starts when the entire element enters the viewport
Uses amount: "all" for precise triggering

Motion Details

Initial State: Text positioned 100% below its normal position (hidden)
Final State: Text slides up to its normal position (0% offset)
Duration: 0.5 seconds with easeOut timing
Direction: Always slides upward (translateY from 100% to 0%)

Play Modes

Once (playOnce: true): Animates only the first time it enters viewport
Repeat (playOnce: false): Re-animates every time you scroll past it

💡 Usage Tips

Staggered Reveals

Create beautiful cascading effects by using different delays:

tsx.tsxTypeScript

1const delays = [0, 0.1, 0.2, 0.3, 0.4];
2
3{
4    headlines.map((text, index) => (
5        <SlideUpTextAnimation key={index} initialDelay={delays[index]}>
6            <h2>{text}</h2>
7        </SlideUpTextAnimation>
8    ));
9}

Long-Form Content

For articles or blog posts, wrap each section:

tsx.tsxTypeScript

1<article className="space-y-16">
2    {sections.map((section, index) => (
3        <SlideUpTextAnimation key={section.id} initialDelay={index * 0.05}>
4            <section>
5                <h2>{section.title}</h2>
6                <p>{section.content}</p>
7            </section>
8        </SlideUpTextAnimation>
9    ))}
10</article>

Hero Sections

Perfect for landing page headlines:

tsx.tsxTypeScript

1<hero className="min-h-screen flex items-center justify-center">
2    <SlideUpTextAnimation initialDelay={0.5}>
3        <div className="text-center">
4            <h1 className="text-8xl font-black mb-8">Transform</h1>
5            <p className="text-2xl text-gray-600">Your digital presence</p>
6        </div>
7    </SlideUpTextAnimation>
8</hero>

🔧 Technical Notes

Overflow Hidden: Component automatically applies overflow-hidden to hide text before animation
Block Display: Wrapper uses block display for proper text flow
Intersection Observer: Uses Motion's useInView hook for efficient viewport detection
No Layout Shift: Text space is preserved during animation to prevent content jumping