Motion values are at the core of all animations in Framer Motion. Everywhere you see a value, for example the current opacity or translateX position of your animation: That is a motion value.

At first glance you can think of them as regular numbers or values, containing the current opacity or translateX. But they are so much more. They are objects that contain the current value, as well as the velocity of that value, and a lot of functions to manipulate them.

Let’s take a look at the figure below.

As you see in the figure, a motion value is so much more than just a regular value. This also means you can’t use them as values directly in your components or a style tag. Again because they aren’t just a number or a string, but a whole object.

In this chapter we will be mainly using useMotionValue to create our own motion values, in order to learn how motion values work.

In later modules, as well as in real world use cases, you are often using other Framer Motion hooks like useScroll, which already give you motion values to work with. However it’s important to first understand the concept of motion values, before we introduce any new hooks.

No React rerender

A big benefit of these motion values, is that they are not tied to React’s state. Therefore React does not need to rerender when they change. This is a big performance benefit over you using useState to manage your animation values.

A rerender triggers some JavaScript code to run, and might even trigger an update in the DOM. Since the motion values update very often when an animation occurs, this could potentially lead to a lot of rerenders. Therefore these motion values bypass React’s rerendering mechanism.