Framer Motion

Language: JavaScript

Animation

Framer Motion was created by the team behind Framer to provide a simple, yet powerful, way to animate React components. It leverages the power of the Framer library while being optimized for performance and accessibility, making complex animations achievable with minimal code.

Framer Motion is a production-ready motion library for React that allows developers to create animations and interactive UI transitions easily, using a declarative API.

Installation

npm: npm install framer-motion

yarn: yarn add framer-motion

Usage

Framer Motion uses components like `<motion.div>` and hooks such as `useAnimation` to animate React elements. It supports animations for position, scale, rotation, opacity, and more, along with gestures, layout transitions, keyframes, and variants for complex animation sequences.

Animate a div on mount

import { motion } from 'framer-motion';

function App() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
    >
      Hello, Framer Motion!
    </motion.div>
  );
}

Animates a div from opacity 0 to 1 over 1 second when the component mounts.

Hover animation

<motion.button whileHover={{ scale: 1.2 }}>
  Hover me!
</motion.button>

Scales the button up when hovered.

Using variants for complex animations

const boxVariants = {
  hidden: { opacity: 0, x: -100 },
  visible: { opacity: 1, x: 0 }
};

<motion.div initial='hidden' animate='visible' variants={boxVariants} transition={{ duration: 1 }} />

Defines reusable animation states (variants) for a component and transitions between them.

Gestures with drag

<motion.div drag dragConstraints={{ left: 0, right: 100, top: 0, bottom: 100 }}>
  Drag me!
</motion.div>

Allows the user to drag the element within specified constraints.

Animating layout changes

<motion.div layout>
  {items.map(item => (
    <motion.div key={item.id} layout>{item.name}</motion.div>
  ))}
</motion.div>

Animates the position of items automatically when the layout changes.

Keyframes animation

<motion.div animate={{ x: [0, 100, 50, 100, 0] }} transition={{ duration: 2 }} />

Animates the element along multiple positions sequentially using keyframes.

Error Handling

Animations not triggering: Ensure that you are using `<motion.div>` (or other motion elements) and that `initial` and `animate` props are correctly set.

Unexpected jump on layout animation: Use the `layout` prop consistently and avoid conflicting CSS transforms.

Performance issues with many elements: Consider using `AnimatePresence` for conditional components and limit simultaneous animations.

Best Practices

Use variants to manage multiple animation states efficiently.

Prefer `layout` prop for automatic layout animations on reordering components.

Use `transition` properties to control timing and easing for smoother animations.

Leverage gesture props like `whileHover`, `whileTap`, and `drag` for interactive UIs.

Keep performance in mind: avoid animating large numbers of elements unnecessarily.

Official Docs Github