Motion

Motion intially known as Framer motion is a animation library that aids in giving our application a seamless and more enhanced user experience. Basically i'd say it brings your website or project to life.

framer motion was limited to only react applications, but recently has been made versatile and now can support other frameworks like svelte, vue and angular.

Why am i writing this?

I'm working on a project an i have to set up framer motion globally so i felt the need to document the process.

How to install and import features

npm install motion

import motion from "motion/react"

The usage is very simple and straightforward: just call the motion method and attach it to any element you want to animate.

The initial property sets the initial state of the element before animation and animate sets it the state it should be on animation

 <motion.div  animate={{ x: 20, opacity: 0.4 }} initial = {{ x: 20, opacity:0.4 }}  />

Ways Motion can be helpful in projects

Smooth Animations and Transitions

Motion provides tools to create fluid transitions between states, such as page changes, modals, or element movements. you no longer have to worry about the complexity of css animations and transitions.

The really cool thing about animation is that it gives life to our projects and makes it more interactive and engaging. most people are more likely to stay on a website that has a good user experience.

Note: The two boxes below illustrate the difference in user experience when navigating a site with animations versus one without.

CLICK ME!!!

to view an animated modal

CLICK ME!!!

to view a nonanimated modal

State-Based Animations

Motion makes it incredibly simple to create animations based on component state, animations can directly respond to component state changes using React's state management. Achieving this level of control with CSS animations would require manually toggling classes and managing styles.

Variant-Based Animations

Variants are a great way to create reusable animation states that you can apply across multiple components. They make it easy to keep your animations consistent and simplify your code, so you don’t have to redefine the same animation settings every time. This not only saves time but also keeps your project organized and easier to manage.

 
const menuVariants = {
  closed: {
    opacity: 0,
    x: "-100%",
    transition: {
      duration: 0.3,
      ease: "easeInOut",
    },
  },
  open: {
    opacity: 1,
    x: 0,
    transition: {
      duration: 0.3,
      ease: "easeInOut",
    },
  },
};

Some of the basic Motion properties are:

Initial: sets the initial state of the element before animation
Animate:sets the state of the element during animation
Exit: sets the state of the element when it is removed from the DOM
variants: defines a set of animation states that can be reused across multiple components

Example of a component using these properties

 <motion.div
            initial="closed"
            animate="open"
            exit="closed"
            variants={menuVariants}
            className="absolute top-0 left-0 w-full h-full bg-emerald-950 z-10"
          >{children}</motion.div>

Conclusion

There's so much more to explore with Motion, but I'll wrap up my article here. For a deeper dive and more advanced techniques, I highly recommend checking out their official documentation . It's a fantastic resource for mastering animations and enhancing your projects!