If you’ve spent anytime making some applications with React, you might’ve explored your way around adding animations to your app. But were those ways efficient and simple?

Your UI deserves better gliding capabilities.

Developing an application as a bare skeleton is as easy as it gets, but today, we are not here for the minimum viable product are we? Whenever I visit any website, the first thing I notice is the general flow of the components, to be honest, I just checkout the vibe.

And the vibe of any application is generally determined by the feel of things as we interact with them, be it clicking or just hovering over. The components that form the whole should integrate with each other quite seamless-ly to give the users a smooth feel which is comfortable for their eyes (yeah).

The best way to emboss that smoothness on your canvas is to add animations which are subtle but also very significant if you look at the whole picture.

This is where Framer Motion comes in.

Framer motion is a complete gamechanger

Framer motion (now known as motion) is an animation library at its core. But, it’s lightweight and blends right in with your React application.

With motion, you are not busy writing 287 lines of keyframes or rather stuck with weird transitions for a simple animation which doesn’t suite the vibe. This library will give you complete freedom over your animation choices but with the advantage of minimal code which equals less time being wasted so you can focus on getting more things done with less effort.

how is motion a gamechanger though?

because it simplifies your code and makes it 10x more readable and all that is inline with the component so you are not managing different files for animations.

Getting started with motion

Using motion is simple,

1. To install motion as a dependency,

    npm install motion
   

2. Then import motion to your app,

    import { motion } from "motion/react"
   

and you are set to use motion in your code, as easy as that!

Example of a motion div for a button animation

<motion.button
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95 }}
/>

<motion.button> replaces the normal tag. It behaves exactly like a regular button but now supports Framer Motion animations.

The whileHover scales the component to 110% of its size, when you hover on the button.

The whileTap scales it down to 95% of its size, when you tap on the button.

I bet that I didn’t even need to give you that explanation for the code as its already pretty much self explanatory and highly readable.

You can tap on the link below to check out the button animation yourself.

Now, I’m not here to give you the full tutorial for using the library, because duh, we have the official motion.dev website where you can go and read the documentation if you want to learn about this.

Choosing FramerMotion over VanillaCSS

Bringing it all together

Choosing a different technology for something you have already grown comfortable with can feel unnecessary at times or may even seem tough as the landscape feels completely unknown. So, you have to trust me on this and try it out yourself. This will help you better align your thoughts about choosing something new.

As for my own preference I simply cannot go back to traditional ways of adding animation to my app after experiencing how simple it is to code with this library.

this is how you go from static to cinematic.