Funimation with Framer Motion

Exploring the world of Framer motion. Framer Motion (now rebranded as Motion) is a popular, open-source production-ready motion library for React.

Hover Basic

A simple hover animation where motion lets you add a whileHover prop to the element and you get this nicely smooth animation out of the box.

<motion.div whileHover={{ scale: 1.5 }} />

Enter Item

An enter animation item, where you can specify an initial state opacity of 0 and end state of opacity of 1. You could also animate the x, y, z axis. In motion the default animation transition duration is somewhere between 0.3 to 0.8 if user do not specify the duration.

<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} />

Enter Item (Staggered)

Unlike simple Enter animation above, we can use Variants to have named properties and orchestrate the children animation. We can also add staggered delay for each child like below.

const container = {
  visible: { transition: { staggerChildren: 0.1 } },
};
const item = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
};

<motion.div variants={container} initial="hidden" animate="visible">
  <motion.div variants={item} />
  <motion.div variants={item} />
</motion.div>

Animate in View

In this section you can utilize the motion component attributes named whileInView and viewport to animate elements when they come into view.

<motion.div
  initial={{ opacity: 0, x: "-50%" }}
  whileInView={{ opacity: 1, x: 0 }}
  viewport={{ once: true }}
/>

AnimatePresence

AnimatePresence allows components to animate out when they are removed from the React tree. Wrap a list of motion elements with it and add an exit prop — Motion handles the rest. The layout prop on each item also makes the remaining items reflow smoothly.

<AnimatePresence>
  {items.map((id) => (
    <motion.div
      key={id}
      layout
      initial={{ opacity: 0, x: 40 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: -40 }}
    />
  ))}
</AnimatePresence>

Drag

You can make any motion element draggable with the drag prop. Use dragConstraints with a ref to bound the draggable area, and dragElastic to control how much it overshoots the boundary.

const ref = useRef(null);

<div ref={ref}>
  <motion.div drag dragConstraints={ref} dragElastic={0.2} />
</div>