Framer Motion — Animate and Map Motion Values

With the Framer Motion library, we can render animations in our React app easily.

In this article, we’ll take a look at how to get started with Framer Motion.

animate

We can use the animate function to animate a single value or a motion value.

For example, we can write:

import React, { useEffect } from "react";
import { animate, motion, useMotionValue } from "framer-motion";

export default function App() {
  const x = useMotionValue(0);

  useEffect(() => {
    const controls = animate(x, 100, {
      type: "spring",
      stiffness: 2000,
      onComplete: (v) => {}
    });

    return controls.stop;
  });

  return (
    <div className="App">
      <motion.div
        style={{ x, backgroundColor: "red", width: 100, height: 100 }}
      />
    </div>
  );
}

to create the x motion value with useMotionValue .

Then we can animate it with the animate function.

We set the type of the animation and the stiffness of it.

Then we return the control.stop method in the callback to stop using it.

Then finally we put the x value into the style prop so we can use it.

Transform

The transform function transforms a number into other values by paying them into an output range.

For example, we can write:

import React, { useEffect, useState } from "react";
import { motion, transform, useMotionValue } from "framer-motion";

export default function App() {
  const x = useMotionValue(0);
  const inputRange = [0, 100];
  const outputRange = [1, 0.3];
  const [opacity, setOpacity] = useState();

  useEffect(() => {
    x.onChange((latest) => {
      const opacity = transform(latest, inputRange, outputRange);
      setOpacity(opacity);
    });
  }, []);

  return (
    <div className="App">
      <motion.div
        drag="x"
        style={{ x, opacity, backgroundColor: "red", width: 100, height: 100 }}
      />
    </div>
  );
}

to call transform to map the x motion value into an opacity value.

We watch the x value with onChange .

Then in the callback, we call transform to map the inputRange , which has the x value range, to the outputRange , which has the opacity values.

It returns the opacity value that we use in the motion.div .

Therefore, we see that the div changes in capacity when we drag it.

Also, we can use the transform function with the inputRange and outputRange array.

Then we can call the convertRange function with the latest x value to create our opacity value:

import React, { useEffect, useState } from "react";
import { motion, transform, useMotionValue } from "framer-motion";

export default function App() {
  const x = useMotionValue(0);
  const inputRange = [0, 100];
  const outputRange = [1, 0.3];
  const [opacity, setOpacity] = useState();

  useEffect(() => {
    x.onChange((latest) => {
      const convertRange = transform(inputRange, outputRange);
      const opacity = convertRange(x.get());
      setOpacity(opacity);
    });
  }, []);

  return (
    <div className="App">
      <motion.div
        drag="x"
        style={{ x, opacity, backgroundColor: "red", width: 100, height: 100 }}
      />
    </div>
  );
}

We did all of that in the onChange callback to create the opacity value and pass that into the style prop.

Conclusion

We can use the animate function to animate motion values.

And we can map motion values to other values with Framer Motion.