Animation in React (Framer Motion & React Spring)
5 questions foundWhat is Framer Motion and how does it make animating React components easier?
Beginner Framer Motion is a popular animation library for React. Instead of writing complex CSS animations by hand, you use its motion components and simply describe the starting state, the ending state, and how long the change should take. Framer Motion handles all the smooth transition work for you.
import { motion } from 'framer-motion';
function FadeInBox() {
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
>
Hello there
</motion.div>
);
}
Real-world example A landing page uses Framer Motion to fade in each section as the user scrolls down, making the page feel more polished without writing any custom CSS keyframes.
Common follow-ups: How do you trigger an animation only when an element scrolls into view?;What is the difference between the animate prop and the whileHover prop?
Components & JSX;Performance (memo/useMemo)
How does React Spring differ from Framer Motion in the way it creates animations?
Intermediate React Spring is based on physics, meaning you describe how something should move using spring settings like tension and friction rather than a fixed duration. This often looks more natural because the animation speeds up and slows down the way real physical objects do. Framer Motion is easier to start with, while React Spring gives more fine control over the feel of the motion.
import { useSpring, animated } from '@react-spring/web';
function SpringBox() {
const styles = useSpring({ opacity: 1, from: { opacity: 0 } });
return <animated.div style={styles}>Hello there</animated.div>;
}
Real-world example A mobile game built with React uses React Spring for character movement so that jumps and slides feel natural and bouncy, similar to physical motion.
Common follow-ups: When would you pick React Spring over Framer Motion for a project?;How do you chain multiple spring animations together in sequence?
Performance (memo/useMemo);Custom Hooks
How would you animate a list where items can be added or removed, such as a shopping cart?
Intermediate Framer Motion provides an AnimatePresence component that detects when an item is removed from a list and plays an exit animation before it actually disappears from the screen, instead of the item just vanishing suddenly.
import { motion, AnimatePresence } from 'framer-motion';
function CartList({ items }) {
return (
<AnimatePresence>
{items.map((item) => (
<motion.li key={item.id} exit={{ opacity: 0, x: -50 }}>
{item.name}
</motion.li>
))}
</AnimatePresence>
);
}
Real-world example An online store animates each product sliding out smoothly when a customer removes it from their shopping cart, instead of the item disappearing instantly and confusing the user.
Common follow-ups: Why does AnimatePresence require each item to have a stable key?;How do you animate items being reordered within the same list?
Conditional Rendering & Lists (Keys);Components & JSX
How do you keep animations smooth and avoid hurting performance in a React app?
Advanced Animations run smoothly when they only change properties like transform and opacity, since browsers can handle those using the graphics card without recalculating the whole page layout. Animating properties like width or top forces the browser to redo layout work on every frame, which can make the animation feel choppy, especially on lower powered devices.
// Smooth, uses the graphics card
<motion.div animate={{ x: 100, opacity: 1 }} />
// Slower, forces layout recalculation on every frame
<motion.div animate={{ left: '100px', width: '200px' }} />
Real-world example A team notices their sidebar animation feels laggy on older phones, and fixes it by switching from animating the width property to animating a transform scale instead, which runs much smoother.
Common follow-ups: How do you measure whether an animation is actually causing performance problems?;What is the difference between the CPU and the GPU when it comes to running animations?
Performance (memo/useMemo);React DevTools & Debugging
How would you animate a button so it grows slightly when a user hovers over it?
Beginner Framer Motion has a whileHover prop that lets you describe how a component should look only while the mouse is hovering over it, and it automatically animates back to normal once the mouse moves away.
import { motion } from 'framer-motion';
function HoverButton() {
return (
<motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>
Click Me
</motion.button>
);
}
Real-world example A pricing page adds a small hover grow effect to its subscribe button, making the button feel more clickable and interactive to visitors.
Common follow-ups: What is the difference between whileHover and whileTap?;How would you add the same hover effect to many buttons without repeating code?
Custom Hooks;Components & JSX