ParallaxFloatingAnimation

A scroll-driven animation wrapper that applies a parallax-style floating effect to its children along the vertical axis. Perfect for modern UIs, landing pages, and interactive sections with subtle motion.

✨ Features

Scroll-Linked Animation: Moves elements based on scroll position
Smooth Motion: Powered by Motion React for fluid animations
Configurable Offsets: Control starting and ending positions
Lightweight: Minimal performance impact with optimized transforms
Easy Integration: Drop-in wrapper for any React component

📋 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 { ParallaxFloatingAnimation } from './components/parallax-floating-animation';
2
3export default function HomePage() {
4    return (
5        <div className="min-h-screen">
6            <ParallaxFloatingAnimation>
7                <div className="w-64 h-32 bg-white rounded-lg shadow-lg">
8                    This content will float as you scroll
9                </div>
10            </ParallaxFloatingAnimation>
11        </div>
12    );
13}

The element will smoothly move upward (-200px) as the user scrolls down the page.

🔧 Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Content to animate (optional)
`initialYOffset`	`number`	`0`	Starting vertical position in pixels
`finalYOffset`	`number`	`-200`	Ending vertical position in pixels
`className`	`string`	-	Additional CSS classes for styling

Note: initialXOffset and finalXOffset props are defined in the interface but not currently implemented.

📖 Examples

Basic Floating Effect

tsx.tsxTypeScript

1<ParallaxFloatingAnimation>
2    <img
3        src="/hero-image.jpg"
4        alt="Hero"
5        className="w-full h-96 object-cover rounded-lg"
6    />
7</ParallaxFloatingAnimation>

Subtle Upward Movement

tsx.tsxTypeScript

1<ParallaxFloatingAnimation initialYOffset={0} finalYOffset={-50}>
2    <div className="p-8 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl">
3        <h2 className="text-2xl font-bold">Featured Content</h2>
4        <p>This moves up subtly as you scroll</p>
5    </div>
6</ParallaxFloatingAnimation>

Downward Floating Effect

tsx.tsxTypeScript

1<ParallaxFloatingAnimation initialYOffset={0} finalYOffset={100}>
2    <div className="w-32 h-32 bg-yellow-400 rounded-full flex items-center justify-center">
3        <span className="text-xl">⭐</span>
4    </div>
5</ParallaxFloatingAnimation>

Multiple Elements with Different Speeds

tsx.tsxTypeScript

1<div className="space-y-32">
2    {/* Fast movement */}
3    <ParallaxFloatingAnimation initialYOffset={0} finalYOffset={-300}>
4        <div className="bg-red-500 w-24 h-24 rounded-lg" />
5    </ParallaxFloatingAnimation>
6
7    {/* Slow movement */}
8    <ParallaxFloatingAnimation initialYOffset={0} finalYOffset={-50}>
9        <div className="bg-blue-500 w-24 h-24 rounded-lg" />
10    </ParallaxFloatingAnimation>
11</div>

Custom Styling

tsx.tsxTypeScript

1<ParallaxFloatingAnimation
2    className="opacity-80 hover:opacity-100 transition-opacity"
3    initialYOffset={20}
4    finalYOffset={-80}
5>
6    <button className="px-6 py-3 bg-green-500 text-white rounded-lg">
7        Floating Button
8    </button>
9</ParallaxFloatingAnimation>

🎭 Animation Behavior

The animation is triggered based on the element's position in the viewport:

Start: When element enters the bottom of the viewport
End: When element exits the top of the viewport
Progress: Linear interpolation between initialYOffset and finalYOffset

Scroll Trigger Points

start end: Animation begins when element's top reaches viewport bottom
end start: Animation completes when element's bottom reaches viewport top

🔧 Understanding Offsets

Positive values (e.g., 100) move elements down
Negative values (e.g., -100) move elements up
Zero (0) means no movement from original position

Common Patterns

tsx.tsxTypeScript

1// Subtle upward float
2initialYOffset={0} finalYOffset={-50}
3
4// Dramatic upward movement
5initialYOffset={0} finalYOffset={-200}
6
7// Downward drift
8initialYOffset={0} finalYOffset={100}
9
10// Starting below, ending above
11initialYOffset={50} finalYOffset={-50}

💡 Tips

Use sparingly - Too many parallax elements can be distracting
Test on mobile - Consider reducing offsets for smaller screens
Combine with other effects - Works well with opacity and scale animations
Performance - The component uses will-change: transform for optimal rendering