What is Motion?

In this lesson, we'll explore how to create beautiful animations in Next.js using Framer Motion.

Framer Motion is now called as Motion so you may see it referred to as Motion in the documentation and a lot of folks that used it in the past might call it FramerMotion.

What is Framer Motion?

Framer Motion is a powerful animation library for React that makes it easy to create smooth, interactive animations.

The key to Framer Motion's power is the motion component system.

Understanding Motion Components

The motion in Framer Motion is what gives life to your components. It's a special namespace that transforms regular HTML elements into animated components. For example:

• motion.div - An animated div element
• motion.h1 - An animated heading
• motion.button - An animated button

When you add motion to an element, you're essentially saying "I want this element to be animated." The motion namespace provides all the animation capabilities that Framer Motion offers.

How does motion work?

Let's see the difference between a regular static element and an Motion animated one:

In this demo, you can see:

• On the left: A regular div with static text
• On the right: A motion.div with animated text that fades in and moves up

The key difference is that we add the motion namespace to the element and provide animation properties:

The motion components accept special props that control animations:

• initial: Starting state of the animation
• animate: End state of the animation
• exit: State when component is removed
• transition: Controls timing and easing
• whileHover: State while hovering
• whileTap: State while clicking

You can do a lot of really cool things with Motion which is why it's so popular. Next time, you'd like to add animations to your components, you can use Motion and extend the HTML element with a namespace called motion.

Next, let's learn a important pattern to use Motion in Next.js with Server components.