Animated Footer Parallax

When you’re crafting a modern website, the footer is usually the last thing people see — but it doesn’t have to be boring. With Framer Motion and TailwindCSS, you can make it smooth, dynamic, and reactive to scroll.

In this post, I’ll walk you through building a scroll-reactive animated footer that fades in, scales, and de-blurs as you approach it. We'll also enhance the page experience with Lenis smooth scrolling.

What We’ll Use

• Next.js 15 (App Router) – for project structure and rendering

• Framer Motion – for scroll-based animations

• TailwindCSS – for utility-first styling

• Lucide Icons – for clean SVG icons

• Lenis – for buttery-smooth scrolling

The Animation Mechanics

The magic happens thanks to Framer Motion’s useScroll and useTransform hooks:

1. useScroll gives us a progress value (scrollYProgress) from 0 → 1 as the footer comes into view.

2. useTransform maps that value into effects:

   • y: slides the footer upward (-50% → 0%).

   • scale: slightly zooms it in (0.85 → 1).

   • opacity: fades in gradually.

   • blur: goes from blurry (10px) to sharp (0px).

3. useMotionTemplate lets us combine values (like blur) into CSS properties.

So, as you scroll to the bottom, the footer feels like it’s emerging into focus.

Project Setup

Start with a fresh Next.js app and install dependencies:

Set up Tailwind if you haven’t already (Next.js 15 has good support out of the box).

Full Code Implementation

Here’s the complete codebase split into components:

components/Footer.tsx

components/LenisProvider.tsx

app/layout.tsx

app/page.tsx

Final Result

Now when you scroll down:

• The footer slides up, scales in, and goes from blurred & transparent → crisp & visible.

• With Lenis, the scrolling feels smooth, not jittery.

• Tailwind keeps styling clean and consistent.

Takeaways

• Scroll-based animation makes even static elements feel alive.

• Framer Motion gives granular control with useTransform.

• Small touches like blur-to-sharp transitions give strong “depth” vibes.

This pattern is reusable for hero sections, call-to-actions, or banners — not just footers.

Feel free to navigate through the Github Repo ↗