TL;DR: This blog post provides a comprehensive guide using Framer Motion, a React animation library. It covers key concepts like motion components, variants, and transitions and provides practical examples of creating fading button, slide-in sidebar, draggable modal, and card flip animations.
Our first priority as front-end developers is to create web applications that keep users engaged. This is possible by creating interactive pages and providing a better user experience.
Animations make your pages interactive; they guide users and make interactions interesting. Small visual motions on the page, such as user interaction or events or page navigation, give a feel of liveliness, like we are interacting with a living thing responding to our actions.
Animation, in simple terms, is a way of visually changing the elements by updating their properties or dimensions over time on interactions or certain events. For example, a loading indicator that shows that your action is in progress.
There are two ways to animate an element on the webpage (two ways to change the element properties).
In this article, we will explore Framer Motion, one of the most popular libraries for animation. It provides simplicity and flexibility and is designed to work with modern frontend frameworks like React.
Framer Motion is a production-ready animation library for React that creates simple animations like transitions and complex, gesture-based interactions through its declarative syntax. It features:
Add the Framer Motion library to your project using the npm or yarn package manager.
npm install framer-motion
Or
yarn add framer-motion
Once the dependency is loaded you can include this in your project to create interactive animations.
// On Client side
import { motion } from "motion/react"
// On Server-side
import * as motion from "motion/react-client"
Motion components:
Framer Motion comes with a list of motion components to create 120fps animations. It provides gesture support that contains all the HTML elements (like motion.div) and common SVG elements (like motion.square) that are special React components that can be used.
<motion.div className="card" />
Props & APIs:
Framer Motion provides a list of APIs as props, such as initial, animate, and exit that define the animation behavior.
<motion.button
initial={{opacity: 0}}
animate={{opacity: 1}}
transition={{duration: 1}}
exit={{opacity: 0}}
>
Click Me
</motion.button>
Initial prop is fired on the component mount, animate is fired when the component updates, and the exit prop is fired when the component unmounts. Refer to the complete Framer Motion animation guide for more details.
Motion components are independent of the Reacts lifecycle or render cycle for improved performance. Thus, we should rely on the React state for the animation, rather than using the motion values that will update the styles without triggering re-renders.
import { motion, useMotionValue } from "framer-motion";
const MotionState = () => {
const xPosition = useMotionValue(0);
useEffect(() => {
// It won’t trigger a re-render on the component
const interval = setInterval(() => {
xPosition.set(xPosition.get() + 100);
}, 1000);
return () => clearInterval(interval);
}, []);
return (
<motion.div
style={{ x, height: "10px", background: "red", width: "100px" }}
/>
);
};
In the previous example, the motion.div element will be translated by 100px on the x position (horizontally, translateX(100px)) at an interval of 1s.
Variants: framer-motion provides support for the variants, which allows the reuse of animation configurations across multiple elements.
const AnimatedList = () => {
const listVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
staggerChildren: 0.2,
},
},
};
const itemVariants = {
visible: { opacity: 1 },
hidden: { opacity: 0 },
};
return (
<motion.ul initial="hidden" animate="visible" variants={listVariants}>
{[1, 2, 3].map((item) => (
<motion.li key={item} variants={itemVariants}>
Item {item}
</motion.li>
))}
</motion.ul>
);
};
Variants includes:
Custom components: Any React component can be converted to a motion component by passing it through the motion.create() function.
const ReactComponent = (props) => {
return <button {...props}>ClickMe>/button>;
};
const MotionComponent = motion.create(ReactComponent);
const FadingButton2 = () => {
return (
<MotionComponent
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 3 }}
>
Click Me
</MotionComponent>
);
};
By default, all the motion props will be filtered out while passing it to the React component. The animation will be applied to the component, but you cannot access the props in the React.
To access the motion props, pass the flag forwardMotionProps: true while creating the motion component.
const MotionComponent = motion.create(ReactComponent, {
forwardMotionProps: true,
});
The motion.create() function also accepts a string that will create the motion component of a custom DOM element.
const MotionComponent = motion.create('section', {
forwardMotionProps: true,
});
Note: Avoid using the motion.create() in the React lifecycle methods like (useEffect), as this will create a new component every time the lifecycle method is fired.
Now that you have a good idea of how Framer Motion works and its APIs, let’s see some examples of how you can use it for common animation.
const FadingButton = () => {
return (
<motion.button
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 1 }}
>
Click Me
</motion.button>
);
};
export default FadingButton;
The exit property takes effect only when wrapped in the AnimatePresence component.
<AnimatePresence>
<motion.button
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 1 }}
>
Click Me
</motion.button>
</AnimatePresence>
AnimatePresence affects the direct children, which are motion components that are being removed from the React component tree.
This can be when the component is updating on the lifecycle change (mount, update, unmount)
<AnimatePresence>
{showButton && (<motion.button
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 1 }}
>
Click Me
</motion.button>)}
</AnimatePresence>
Its key changes
<AnimatePresence>
<motion.button
key={buttonId}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 1 }}
>
Click Me
</motion.button>
</AnimatePresence>
Children are added or removed from the list.
<AnimatePresence>
{buttonsList.map((button) => (
<motion.button
key={button.id}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 1 }}
>
Click Me
</motion.button>
))}
</AnimatePresence>
const Sidebar = () => {
const [show, setShow] = useState(false);
return (
<>
<AnimatePresence>
{show && (
<motion.div
initial={{ x: "-100%" }}
exit={{ x: "-100%" }}
animate={{ x: 0 }}
transition={{ duration: 0.5, ease: "easeOut" }}
>
<p>This is a sidebar!</p>
</motion.div>
)}
</AnimatePresence>
<button onClick={() => setShow(!show)}>Show>/button>
</>
);
};
Transition props play a crucial role in animation. They control how animations progress over time. Framer Motion supports multiple properties for smooth animation.
Framer motion also supports interactive animations with gestures like hover, tap, and drag.
const DraggableModal = () => {
return (
<motion.div
drag
dragConstraints={{ left: 0, right: 300, top: 0, bottom: 300 }}
style={{ width: 200, height: 200, background: "lightblue" }}
>
Drag Me!
</motion.div>
);
};
export default function App() {
const [isFlipped, setIsFlipped] = useState(false);
return (
<>
<button onClick={() => setIsFlipped(!isFlipped)}> Flip >/button>
<div style={{ width: "100", height: "100", position: "relative" }}>
<Card isFlipped={isFlipped} />
</div>
</>
);
}
const Card = ({ isFlipped }) => {
return (
<motion.div
animate={{ rotateY: isFlipped ? 180 : 0 }}
transition={{ duration: 0.8 }}
style={{
perspective: 1000,
transformStyle: "preserve-3d",
position: "relative",
width: "100px",
height: "100px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<div
style={{
position: "absolute",
backfaceVisibility: "hidden",
transform: "rotateY(0deg)",
background: "red",
}}
>
Front
</div>
<div
style={{
position: "absolute",
backfaceVisibility: "hidden",
transform: "rotateY(180deg)",
background: "green",
}}
>
Back
</div>
</motion.div>
);
};
Framer Motion can be used along with the react-router to animate the components on the route change and provide a seamless user navigation experience.
import { BrowserRouter, Routes, Route } from "react-router";
const Page = ({ children }) => (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.5 }}
>
{children}
</motion.div>
);
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" exact element={<Page>Hello</Page>} />
<Route path="/about" element={<Page>About</Page>} />
</Routes>
</BrowserRouter>
);
}
Thanks for reading! Framer Motion is a powerful animation library that makes it easier to add stunning animations to React components. It helps you create a simple animation to handle complex, gesture-based interactions. There are endless possibilities with Framer Motion to add interactions to your React applications.
The new version of Essential Studio® is available for existing customers on the License and Downloads page. If you’re new, sign up for our 30-day free trial to explore our features.
Feel free to contact us through our support forum, support portal, or feedback portal. We’re always here to assist you!