Motion (Formerly Known as Framer Motion) — A New Era of Web Animations

If you’ve been working with animations in React, you’ve probably heard of Framer Motion. It’s been one of the most loved animation libraries for frontend developers due to its ease of use, flexibility, and performance.

Now, Framer Motion has evolved and been rebranded simply as Motion — with new features, better performance, and an even simpler API to make animations in React more powerful than ever before.

In this blog, I’ll share what I’ve learned as I recently explored Motion, some beginner-friendly examples, and why it’s worth adding to your skill set.

---

What is Motion?

Motion is a React animation library designed for creating smooth, interactive, and production-ready animations with minimal effort. It builds on the foundations of Framer Motion but streamlines the experience for developers.

It supports everything from simple fade-ins to complex gesture-based animations, making it perfect for landing pages, UI micro-interactions, and fully animated experiences.

---

Why the Rebranding?

Framer Motion was originally developed as part of Framer, the design and prototyping tool. Over time, the animation library became popular on its own, even outside of Framer.

To reflect its independence and future direction, the team rebranded it to Motion — a dedicated, standalone animation solution for React.

---

Key Features of Motion

• Ease of Use: Just add motion to your HTML/React elements and start animating.

• Declarative Syntax: No need to manually handle animation timelines or CSS transitions.

• Gesture Support: Animations can respond to drag, hover, tap, and scroll events.

• Layout Animations: Automatically animates between layout changes.

• Variants: A powerful way to create reusable animation states.

• Server Components Support: Works seamlessly in Next.js and modern React setups.

---

Installation

You can quickly install Motion in your project with:

npm install motion

Or using Yarn:

yarn add motion

---

Basic Example 1 — Fade In Box

import { motion } from "motion/react";

export default function App() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
      style={{
        width: 200,
        height: 200,
        backgroundColor: "tomato",
        margin: "50px auto",
      }}
    />
  );
}

Here:

• initial defines the starting state.

• animate defines the end state.

• transition controls how long and how smoothly it happens.

---

Example 2 — Hover Animation

<motion.button
  whileHover={{ scale: 1.1, backgroundColor: "#ff4081" }}
  whileTap={{ scale: 0.9 }}
  style={{
    padding: "12px 24px",
    fontSize: "16px",
    backgroundColor: "#6200ea",
    color: "#fff",
    border: "none",
    borderRadius: "6px",
    cursor: "pointer",
  }}
>
  Hover Me
</motion.button>

This example shows:

• whileHover — what happens when the user hovers.

• whileTap — what happens when the button is clicked/tapped.

---

Example 3 — Variants for Reusable Animations

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

<motion.div
  variants={boxVariants}
  initial="hidden"
  animate="visible"
  transition={{ duration: 0.8 }}
  style={{
    width: 150,
    height: 150,
    backgroundColor: "skyblue",
    margin: "20px",
  }}
/>

With variants, you define animation states separately and reuse them in multiple components.

---

Example 4 — Drag and Drop

<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: -50, bottom: 50 }}
  style={{
    width: 100,
    height: 100,
    backgroundColor: "orange",
    borderRadius: "8px",
  }}
/>

Here, drag enables dragging, and dragConstraints limits how far the element can move.

---

Example 5 — Scroll-based Animations

import { motion, useScroll, useTransform } from "motion/react";

function ScrollAnimation() {
  const { scrollYProgress } = useScroll();
  const scale = useTransform(scrollYProgress, [0, 1], [0.5, 2]);

  return (
    <motion.div
      style={{
        scale,
        width: 200,
        height: 200,
        backgroundColor: "limegreen",
        margin: "50px auto",
      }}
    />
  );
}

useScroll and useTransform allow you to create animations that respond to the scroll position.

---

Why You Should Learn Motion Now

• Future-proof: It’s the official evolution of Framer Motion.

• Better Performance: Optimized for modern React and Next.js.

• Clean Syntax: Easier to read and maintain than raw CSS animations.

• Community Support: A large and active community with plenty of tutorials and examples.

---

Final Thoughts

Motion (formerly Framer Motion) is not just a rebrand — it’s a step forward in how we approach animations in React. The learning curve is gentle, the possibilities are endless, and it fits beautifully into any frontend workflow.

If you’ve been meaning to add more life and interactivity to your projects, now’s the best time to dive in.

Conclusion

Motion represents a significant advancement in the realm of web animations for React developers. With its rebranding and enhanced features, Motion offers a streamlined, powerful, and user-friendly approach to creating animations. Its ease of use, declarative syntax, and support for complex interactions make it an invaluable tool for developers looking to add dynamic and engaging elements to their projects. As the official evolution of Framer Motion, it promises better performance and seamless integration with modern React setups, including Next.js. With a supportive community and a wealth of resources, now is the perfect time to embrace Motion and elevate your web development skills.