posts
/simple-animation-with-motion

Simple Animation with Motion

Published Jan 3, 2025

Motion is a library that makes it fun, simple, and easy to create animations in React. Motion is derived from the famous framer-motion package, but seems now it has been decoupled from framer. Hopefully, this means that motions now is focus solely to deliver better animation for the web.

If you are a web engineer, you will most likely need to create simple animations for your project, and I myself many times feel that it is such a hassle to just create a simple animation. What I ended up doing is to create a copy pasted template CSS and every time a project needs the same animation, I will copy and paste all of it and sort of re-use the classNames. Well to me, I think this is such a boilerplated work and I think it is not a good practice to do so.

What I like about motion is their easy to use component/functions to create animation and it works using web API under-the-hood. Animations should not be a hard thing to do. Instead it should be fun and simple to do, and it that sense motion makes the perfect fit for me.

Here are a simple use-case that I end up keep using with motion accross my projects. I found them simply to be useful and I hope you will find them useful too.

Scale down on tap

I like to use this animation on buttons. It gives the feeling that the button is being pressed down on click. Just a one-line of code to achive this.

copy
1import { motion } from 'motion/react';
2
3const Button = () => {
4	return <motion.button whileTap={{ scale: 0.95 }}>click me</motion.button>;
5};

Border glow on hover

Yes, this is a very simple animation: add border on hover. But for users it makes your site more living.

copy
1import { motion } from 'motion/react';
2
3const Button = () => {
4	return (
5		<motion.div
6			initial={{
7				borderColor: 'var(--color-border)' // your default border color variable
8			}}
9			whileHover={{
10				borderColor: 'var(--color-border-accent)', // your hover border color variable
11				transition: {
12					duration: 0.2
13				}
14			}}
15		>
16			hover me
17		</motion.div>
18	);
19};

SVG animations

Motion can also use to animate SVGs. I found it also very easy to animate SVGs.

This is an example of a settings button that I created using motion. It uses the button of the parent and listen to the whileHover event to animate the setting SVG. Surprisingly, in motion you can do such a complex animation with just a few settings.

copy
1import { motion } from 'motion/react';
2
3export default function SettingsButton({
4  className,
5  onClick,
6  disabled
7}: HTMLProps<HTMLButtonElement>) {
8  return (
9    <motion.button
10      className={cn(
11        'w-[72px] h-[72px] cursor-pointer flex justify-center items-center shadow-lg rounded-full bg-white',
12        className
13      )}
14      whileHover={'hover'}
15      onClick={onClick}
16      disabled={disabled}
17    >
18      <svg
19        xmlns="http://www.w3.org/2000/svg"
20        width="24"
21        height="24"
22        viewBox="0 0 24 24"
23        fill="none"
24        stroke="currentColor"
25        strokeWidth="2"
26        strokeLinecap="round"
27        strokeLinejoin="round"
28        className="lucide lucide-settings-2"
29      >
30        <path d="M20 7H5" />
31        <path d="M20 17H5 " />
32        <motion.circle
33          variants={{
34            hover: {
35              cx: 7,
36              cy: 17,
37              r: 3
38            }
39          }}
40          initial={{
41            cx: 17,
42            cy: 17,
43            r: 3
44          }}
45          fill={'white'}
46          transition={{ duration: 0.5 }}
47        />
48        <motion.circle
49          variants={{
50            hover: {
51              cx: 17,
52              cy: 7,
53              r: 3
54            }
55          }}
56          fill={'white'}
57          initial={{
58            cx: 7,
59            cy: 7,
60            r: 3
61          }}
62          transition={{ duration: 0.5 }}
63        />
64      </svg>
65    </motion.button>
66  )
67}
68

Copy Link