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 ...
... 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.)
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
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.
import {motion} from "framer-motion"
And then you can declare motion components instead of classic HTML/JSX components. like,
<motion.div/>
instead of
<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.
Or this scroll dependent animation...
Or this shape-shifting object for your brand logo.
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:
And the API documentation here.
We hope you found this insightful.
Do visit our website to know more about us and also follow us on :
Also do not forget to like and comment.
Until then,
stay safe, and May the Source Be With You!
Top comments (3)
Nice introduction to framer motion! Although I had no idea what to expect from the article as the title and subtitles had nothing to do with the topic. I'm guessing this article wouldn't do well on a search engine.
Thank you and nice write up 👍
Thankyou ❤️