July 6, 2025
Md. Saad
Enhancing a Next.js application with fluid animations is more than just adding "eye candy"; it also increases user engagement and perceived performance. In this tutorial, we learn how to build a high-performance, animated single-page application using the Motion library, which is the next development of Framer Motion.
Motion is Framer Motion's contemporary replacement. Declarative in nature, you specify the desired state of an element while the library manages the intricate calculations for GPU acceleration and CSS transitions.
Start by creating a new Next.js project:
npx create-next-app@latest next-motionThen, install the Motion library:
yarn add motion
# or
npm install motionNow open your project in VS Code and install the motion package.
You need to comprehend the "lifecycle" of an animation property to master Motion:
Purpose: Defines the CSS values of a component before it mounts.
Technical Logic: Sets the baseline styles immediately upon render, often used to hide elements (e.g., opacity: 0) so they can be transitioned in.
Purpose: The properties the element "moves toward" automatically.
Technical Logic: Framer Motion detects the difference between initial and animate and applies the necessary interpolation to reach this state.
Purpose: Triggers animations specifically when the element enters the user's visible screen area.
Technical Logic: Leverages the Intersection Observer API to detect scroll position relative to the element's bounding box.
Purpose: Controls the "feel" of the movement (velocity, easing, and delay).
Technical Logic: Configures the underlying physics (like spring or tween) and timing functions used to calculate the frames between states.
A continuous animation loop is demonstrated by this component.
'use client';
import { motion } from 'motion/react';
export default function Rotate() {
return (
<motion.div
animate={{ rotate: 360 }}
transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
className="w-48 h-48 bg-blue-500 rounded-2xl flex items-center justify-center text-white"
>
<span className="font-bold">Next.js + Motion</span>
</motion.div>
);
}Linear animations seem robotic. Your user interface will feel like a tangible object with weight and momentum when you use Spring Physics.
'use client'
import { motion } from 'motion/react'
export default function Navbar() {
return (
<motion.nav
initial={{ y: -100, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ type: 'spring', stiffness: 120, damping: 20 }}
className="fixed top-0 w-full p-4 bg-white/80 backdrop-blur-md shadow-sm z-50"
>
<div className="flex justify-center gap-8">
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</motion.nav>
)
}Instead of animating a whole grid at once, we "stagger" them. This guides the user's eye across the content.
const services = ['UI Design', 'DevOps', 'SEO'];
export default function ScalingCards() {
return (
<div className="grid grid-cols-3 gap-6">
{services.map((service, index) => (
<motion.div
key={service}
initial={{ scale: 0.8, opacity: 0 }}
whileInView={{ scale: 1, opacity: 1 }}
transition={{ delay: index * 0.2, duration: 0.5 }}
viewport={{ once: true, margin: "-10% 0px" }}
className="p-8 bg-gray-50 rounded-xl"
>
{service}
</motion.div>
))}
</div>
)
}Traditionally, Framer Motion required the 'use client' directive, which stripped away some SEO benefits. By using motion/react-client, we can get the best of both worlds.
import * as motion from "motion/react-client";
export default function HomePage() {
return (
<main>
<motion.h1
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="text-6xl font-black"
>
Performance Matters.
</motion.h1>
</main>
);
}No longer is it a choice of beauty versus speed when building an animated Next.js site. With Motion's hardware-accelerated transitions and Next.js Server Components, you can now make a site that ranks well and is a treat to look at.
Need help with Next.js animation or Motion integration? Let's consult with the expert developer to scale the Next.js app.
To add animations, install the Motion library and wrap your components using motion elements like motion.div. You can define how elements enter or behave using simple properties like initial, animate, and transition.
Yes, you can. Motion works natively in client components. For server components, a special import allows safe rendering without hydration issues, letting you keep animation logic where you need it.
Use a combination of scroll detection and motion animations to reveal sections when they enter the viewport. This is perfect for building interactive, scroll-friendly landing pages and keeps users engaged.
Staggered animations are great for things like feature cards or service lists. You can apply delays to each item so they animate one after the other, giving your content a more dynamic and polished feel.
Yes. One of Motion's strengths is combining effects easily. You can animate multiple properties in sync—like scaling up while fading in and rotating into view—to create eye-catching transitions.
In many cases, yes. Motion offers more flexibility, better integration with React's lifecycle, and smoother handling of complex UI interactions, like scroll, route transitions, and dynamic layouts.
