Framer MotionFramer Motion is a production-ready open-source animation library for React that makes it incredibly easy to add delightful UI animations, gestures, and interactive elements to web applications. It's built on a declarative API, allowing developers to define complex animations with minimal code, integrating seamlessly with React components.
Key features and concepts of Framer Motion include:
1. Declarative API: Instead of imperative manipulation of DOM elements, you declare the desired animation states (`initial`, `animate`, `whileHover`, `whileTap`, etc.) directly on your `motion` components.
2. `motion` components: These are wrappers around standard HTML and SVG elements (e.g., `motion.div`, `motion.span`, `motion.svg`) that enable animation capabilities.
3. Animation Properties: You can animate virtually any CSS property (e.g., `opacity`, `x`, `y`, `scale`, `rotate`, `backgroundColor`, `boxShadow`).
4. Transitions: Control the timing, easing, duration, and delay of your animations using the `transition` prop. Framer Motion provides a wide range of easing functions and physical spring animations.
5. Variants: A powerful feature for orchestrating complex animations across multiple components or managing different animation states. Variants allow you to define named animation configurations and trigger them by setting the `animate` prop to the variant's name.
6. Gestures: Easily add interactive gestures like hover (`whileHover`), tap (`whileTap`), drag (`drag`), and scroll-based animations.
7. Layout Animations: Animate changes in layout and position automatically using the `layout` prop, making shared element transitions and reordering lists smooth and visually appealing.
8. Exit Animations: Use the `AnimatePresence` component to animate components when they are removed from the DOM, perfect for modal transitions or conditional rendering.
9. Hooks: Framer Motion provides hooks like `useAnimation` for imperative control, `useViewportScroll` for scroll-linked animations, and `useTransform` for mapping values.
Example Code
import React from 'react';
import { motion } from 'framer-motion';
function FramerMotionExample() {
// Define variants for different animation states
const boxVariants = {
hidden: { opacity: 0, scale: 0.5, rotate: -90 },
visible: {
opacity: 1,
scale: 1,
rotate: 0,
transition: {
duration: 1.2, // Total animation duration
ease: "easeOut", // Easing function
delay: 0.5 // Delay before animation starts
}
},
hover: {
scale: 1.1, // Scale up on hover
boxShadow: "0px 0px 15px rgba(97, 218, 251, 0.7)", // Add a glowing shadow
transition: {
duration: 0.3, // Quick transition for hover
type: "spring", // Use spring physics for a bouncier feel
stiffness: 400,
damping: 10
}
},
tap: {
scale: 0.9, // Scale down on tap/click
boxShadow: "0px 0px 5px rgba(97, 218, 251, 0.4)",
transition: { duration: 0.1 }
}
};
return (
<div style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: '100vh',
backgroundColor: '#282c34',
fontFamily: 'Arial, sans-serif'
}}>
<motion.div
// Apply defined variants
variants={boxVariants}
// Initial state before animation
initial="hidden"
// State to animate to after mounting
animate="visible"
// State when the component is hovered
whileHover="hover"
// State when the component is tapped/clicked
whileTap="tap"
// Basic styling for the animated box
style={{
width: 200,
height: 200,
backgroundColor: '#61dafb',
borderRadius: '20px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
color: 'white',
fontSize: '1.5em',
fontWeight: 'bold',
cursor: 'pointer'
}}
>
Hello Framer!
</motion.div>
</div>
);
}
export default FramerMotionExample;