Creating Scroll-Based 3D Parallax Hero Animations in React with Framer Motion

December 5, 2025

In this blog post, I’ll show you how to create an engaging scroll-based 3D parallax hero effect using React and Framer Motion. This effect rotates and scales your hero images on scroll, adding depth and interactivity to your landing page.

See It In Action

Introduction

In modern landing pages, hero sections are the first thing users see. Adding a scroll-based 3D parallax effect gives your hero section depth and interactivity. Using React and Framer Motion, we can rotate and scale images dynamically as the user scrolls, making the page more engaging.

Setting Up the Environment

For this project, you need a React setup (Next.js preferred) and Framer Motion installed. Tailwind CSS is used for styling the layout:

React (Next.js or Create React App)
Framer Motion
Tailwind CSS

Creating the Hero Section Container

We use a `motion.div` as the wrapper for the hero image. This allows us to animate the element based on scroll progress. A `useRef` hook tracks the container element, while `useScroll` and `useTransform` handle the scroll-based transformations.

<> components/HeroSection.tsx

import Image from 'next/image';
import React, { useRef } from 'react';
import { motion, useScroll, useTransform } from 'framer-motion';

const HeroSection = () => {
  const scrollRef = useRef(null);
  const { scrollYProgress } = useScroll({
    target: scrollRef,
    offset: ['start end', 'center'],
  });

  const rotateX = useTransform(scrollYProgress, [0, 1], [24, 0]);
  const scale = useTransform(scrollYProgress, [0, 1], [0.8, 1]);

  return (
    <div className="min-h-screen flex flex-col justify-center items-center pt-28 sm:pt-36 md:pt-48 gap-20">
      <motion.div ref={scrollRef} className="relative w-full">
        <div className="w-full mx-auto px-5 max-w-6xl perspective-[1200px]">
          <motion.div
            style={{ perspective: 1200, rotateX, scale }}
            className="w-full rounded-xl"
          >
            <Image
              width={5120}
              height={2804}
              quality={100}
              unoptimized
              alt="demo"
              src="/Scroll3DParallaxHero/img/dashboard.webp"
              className="rounded-xl"
            />
          </motion.div>
        </div>
      </motion.div>
    </div>
  );
};

export default HeroSection;

How It Works

`useRef` tracks the hero section DOM element.
`useScroll` tracks the scroll progress relative to the hero section.
`useTransform` maps scroll progress to rotation (`rotateX`) and scaling (`scale`).
The inner `motion.div` uses CSS `perspective` to create a 3D effect.

Understanding CSS Perspective

The `perspective` property in CSS defines the distance between the user and the z=0 plane, essentially controlling the intensity of the 3D effect. In our hero component, we set `perspective: 1200px` on the container:

A higher value (e.g., 1200px) creates a subtler, smoother 3D rotation effect.
A lower value would exaggerate the 3D effect, making the image tilt appear more dramatic.
The `perspective` affects child elements in 3D space, which in our case is the hero image inside the `motion.div`.
By using 1200px, we get a natural and visually pleasing parallax effect as the user scrolls.

<> components/HeroSection.tsx

 perspective: 1200;

We should have something like this:

Preview of scroll-based 3D parallax hero effect

Adding Scroll-Based Transformations

We use Framer Motion hooks to smoothly animate rotation and scale based on scroll progress. The `rotateX` changes from 24 degrees to 0, and `scale` from 0.8 to 1 as the user scrolls down.

<> components/HeroSection.tsx

const rotateX = useTransform(scrollYProgress, [0, 1], [24, 0]);
const scale = useTransform(scrollYProgress, [0, 1], [0.8, 1]);

🔍 What does this do?

`rotateX` tilts the hero image along the X-axis to give a 3D effect.
`scale` enlarges the image slightly as the user scrolls into view.
The combination creates a parallax effect that adds depth and interactivity to your hero section.

We should have something like this:

🎯 Final Summary

By combining Framer Motion’s `useScroll` and `useTransform` hooks with CSS perspective, we create a smooth scroll-based 3D parallax hero section. This effect draws attention and improves the user experience of your landing page.

See It In Action

🎉 Conclusion

You’ve successfully built a scroll-based 3D parallax hero effect in React with Framer Motion. This effect can make your landing pages more interactive, visually appealing, and engaging for users.

Related Animations

Recreating a Tailwind CSS Dual Theme Toggle Slider Component Using Tailwind CSS and React

In this blog post, I'll walk you through how I recreated the Dual Theme Toggle Slider component featured on the official Tailwind CSS landing page. This interactive UI lets users drag a center divider to seamlessly toggle between light and dark themes — a sleek and modern way to showcase theme variations.

June 14, 2025

Creating a Parallax Scroll Image Slider with Framer Motion and Tailwind CSS

In this blog post, I'll show you how I built a smooth parallax scroll image slider using Framer Motion, Next.js, and Tailwind CSS. This component creates a beautiful horizontal scroll effect that reacts to vertical scrolling — perfect for galleries, hero sections, or adding subtle depth to any landing page.

June 28, 2025