Motion

JavaScript and React library for building Web Animations. Uses a combination of JavaScript and CSS animations under the hood. Previously Framer Motion.

Why use Motion

Pros

  • Provides a declarative syntax with a lot of implicit behavior to reduce the amount of work needed to build impressive animations.
  • Also provides a imperative syntax which is more low-level, but harder to write and maintain.
  • Batteries-included, with features like layout animations and drag-and-drop handling.
  • Supports animating out components that are being removed from the DOM.

Cons

  • Large bundle size.
  • Implicit behaviors that are confusing to understand and debug.

When to use Motion

  • If the same animation can be attained with CSS animations without much effort, avoid Motion.
    • Enter animations can be handled with pure CSS / Tailwind etc.
    • Radix allows to animate exit in React with CSS.
  • Avoid when reducing bundle size is of high importance, although there are ways to reduce it.
  • If Motion is already in the codebase, it makes sense to use it.

How it works

  • Framer doesn't use the React render cycle, as this would affect performance immensely.
  • Instead, it uses a primitive called MotionValue to keep track of values outside React, allowing Framer to update at 60fps without triggering any re-rendering.
  • All motion components internally use MotionValues to track the state and velocity of an animating value.

Simple Usage

// https://codesandbox.io/p/sandbox/framer-motion-starter-qwpd5p

import { motion } from "framer-motion";
import { useState } from "react";

export default function Example() {
  return (
	<div className="wrapper">
      <motion.div
	      initial={{ opacity: 0, scale: 0 }}
	      animate={{ opacity: 1, scale: 1 }}
	      className="element" />
	</div>
  )
}
  • initial prop provides the starting state of the animation.
  • animate prop provides the end state of the animation.

Animation happens outside of React's render cycle. Every animation update does not trigger a re-render, improving performance.