Framer Motion API for React
Tags: react, ux, webdev, javascript
Published: 2020-09-13 14:34:07

## The Exposition.

We've all been there. Looking at those beautiful animations on so many webpages and looking at our own CSS,sighing at the wire-frame we spent hours on, and googling how to center a div. And don't get us wrong. That is, the way you learn, and of course, Codepen.🌚 
___

But front-ends are important. Some would argue as important as the core back-end of your webapp. After all, it's the part everyone sees, everyone watches, looks for mistakes, wows at it's beauty, snorts their derision at it's design. And this brings us to the Framer. The online, free prototyping tool for front-end designing and animation ...
{% youtube hAPxeoP8wn8 %}

... without writing any code.

Uh, no, thankyou.

## The Spells.

Thankfully(?), though, their Motion API for React is open-source as a NPM package, and you can combine it with your CSS to animate various components as you feel the need. (Hey, I said better animations, not lesser work.)

![Framer Motion](https://dev-to-uploads.s3.amazonaws.com/i/08cpmyj0eha6tr5rtsfe.gif)

You'll need a React based project for this. So, Vue and Angular gang, there's another cap in Facebook's cap.

Moving ahead, this isn't a Vue vs Angular vs React debate, that has been 'settled for good', multiple times to be even relevant anymore.

So, what exactly is *Framer Motion API*? Does it accomplish anything CSS can't?

NO.

So, isn't it useless? **NO**.

It's not what is done, but how quickly and easily it is done, if not the most efficiently is what counts. DO NOT quote us on this, this is how most APIs/frameworks are conceptualised.

And face it, if we went by those definitions, most new JavaScript frameworks will be rendered useless.(Most are.)

Create your react project.

Firstly install the npm package by heading over to terminal and 

```terminal
npm install framer-motion
```
and press Enter.

Framer Motion API works in a very simple way. You import the motion component from the framer-motion npm package in the page or component file as per your need.

~~~javascript
import {motion} from "framer-motion"
~~~

And then you can declare motion components instead of classic HTML/JSX components. like,
```JSX
<motion.div/>
```
instead of ```JSX
<div/>
``` 
All these alternate components come with a lot of configurable values for animation, transformation, even hard-coded in-line CSS, and even GPU accelerated graphics.

## The Magic.

Check this slightly accelerating toggle.

{% codesandbox 2zbg4 %}

Or this scroll dependent animation...

{% codesandbox y0wpc %}

Or this shape-shifting object for your brand logo.

{% codesandbox c6skk %}

Pretty neat, huh? The Example.tsx in the last sandbox has only 21 lines of code.

__Now, that's concise.__

Again, we aren't saying that the Framer online tool is bad. But again, we discuss primarily the coding. If someone can spin up breathtaking visuals with an acute knowledge of classical styling, kudos to them. But the API will allow a lot of developers to create something beautiful. Magical, even. 

And at the end of the day, that's what it is all about. 

Check it out here: {% github framer/motion no-readme %}

And the API documentation [here.](https://www.framer.com/motion/)

___
_We hope you found this insightful._
Do visit our [website](https://nitdgplug.org/) to know more about us and also follow us on :
* [Facebook](https://www.facebook.com/nitdgplug)
* [Instagram](https://www.instagram.com/nitdgplug/)
* [Linkedin](https://www.linkedin.com/company/lugnitdgp/)
* [YouTube](https://www.youtube.com/channel/UCYZPnN5vP5B1sINLLkI1aDA)

Also do not forget to like and comment.

Until then, 
_stay safe, and May the Source Be With You!_

![Star Wars Who?](https://dev-to-uploads.s3.amazonaws.com/i/cplzcsry6s5r8m1pale8.gif)