Animations

motion previously framer-motion is being used in the boilerplate for smooth as butter animations.

Creating animations with motion is also super easy let me show you some examples.

Importing and using `motion` in your component

To enable motion on any element first we import motion then we use it to declare our element like so

import { motion } from "motion/react";

const ExamplePage = () => {
  return (
    <>
      <motion.div>motion div element</motion.div>
      <motion.p>motion p element</motion.p>
    </>
  );
};

export default ExamplePage;

Animating elements

On mount animations

You can animate all motion elements the same way by defining the animate prop that has all the properties that you know from the style prop

This will animate the element to opacity of 0.5 when it first loads

import { motion } from "motion/react";

const ExamplePage = () => {
  return (
    <motion.div
      animate={{
        opacity: 0.5,
      }}
    >
      motion div element
    </motion.div>
  );
};

export default ExamplePage;

Modifying the transition

If you want to set a specific duration, delay, type, bounce for the animation you can do so by defining the transition prop

import { motion } from "motion/react";

const ExamplePage = () => {
  return (
    <motion.div
      animate={{
        opacity: 0.5,
      }}
      transition={{
        type: "spring", // create spring animations
        duration: 0.5, // 0.5 second animation
        bounce: 0.1, // a small bounce effect of 0.1
        delay: 1, // delay one second
      }}
    >
      motion div element
    </motion.div>
  );
};

export default ExamplePage;

Stop animation on first render

The method below will disable the on mount animations also fixes hydration issues if you use it on a server component

For example if you have an input that will be disabled by default and you don't want the transition to be visible on first mount

import { motion } from "motion/react";

const ExamplePage = () => {
  const [disabled, setDisabled] = useState(false);

  return (
    <motion.input
      initial={false}
      animate={{
        opacity: disabled ? 0.5 : 1,
      }}
    />
  );
};

export default ExamplePage;

Start and exit animations

For mount animations you can use the initial prop to set the initial state of the animation and exit for the exit state of the animation

On mount this element will have opacity: 0 and then it will be animated to opacity: 1 and when you remove the element it will be opacity: 0 again

import { motion } from "motion/react";

const ExamplePage = () => {
  return (
    <motion.input
      initial={{
        opacity: 0,
      }}
      animate={{
        opacity: 1,
      }}
      exit={{
        opacity: 0,
      }}
    />
  );
};

export default ExamplePage;

Exit animations

The above example was just to explain how you can define the exit animations but to actually make it work you need to wrap the element with <AnimatePresence /> from motion here is how

import { motion, AnimatePresence } from "motion/react";

const ExamplePage = () => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setIsVisible(false);
      clearTimeout(timeout);
    }, 1000);
  }, []);

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.input
          initial={{
            opacity: 0,
          }}
          animate={{
            opacity: 1,
          }}
          exit={{
            opacity: 0,
          }}
        />
      )}
    </AnimatePresence>
  );
};

export default ExamplePage;

Animate element when it becomes visible to the user

If you have an element sitting in the middle of the page and you want to animate it when it becomes visible after scrolling to it do this

import { motion } from "motion/react";

const ExamplePage = () => {
  return (
    <motion.input
      initial={{
        opacity: 0,
      }}
      whileInView={{
        opacity: 1,
      }}
    />
  );
};

export default ExamplePage;

Animating element from one position to another

Create two of the same element and set the layoutId prop to any string both have to be the same some rules

You can't have both visible for the animation to work
You can't have different layoutId for the elements you want to move

import { motion, AnimatePresence } from "motion/react";

const ExamplePage = () => {
  const [hasMoved, setHasMoved] = useState(false);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setHasMoved(true);
      clearTimeout(timeout);
    }, 1000);
  }, []);

  return (
    <div>
      <div>
        <h1>Position 1</h1>
        {!hasMoved && <motion.div layoutId="my-div">Hello</motion.div>}
      </div>

      <div>
        <h1>Position 2</h1>
        {hasMoved && <motion.div layoutId="my-div">Hello</motion.div>}
      </div>
    </div>
  );
};

export default ExamplePage;

Next steps

There is a lot more you can do with motion like enabling drag and pan to elements, learn more about it follow their docs here