Why you should use Framer Motion

What is Framer Motion?

Think of Framer Motion as more of an improvement or reinvention of an existing animation library than a brand new one.

Framer Motion is the successor to Pose, which was one of the most popular animation libraries used with React. Like Pose, it’s built upon promotion, which is a low-level, unopinionated animation library, but it provides abstractions to streamline the process.

Framer Motion improves upon and simplifies the API in a way that couldn’t have been done without breaking changes and rewriting. One difference is that whereas Framer Motion only has support for React, Pose has support for React-Native and Vue. If you’re currently using Pose I would recommend updating to Framer Motion because Pose has been depreciated.

Why use Framer Motion?

1. If most animation libraries use spring-based animations, then, why should you use Framer Motion? For starters, it has a great API that is simple and doesn’t fill your components with extra code. In most cases, you can simply replace your HTML element with a motion element — for example, div with motion.div, which results in the same markup but has additional props for animation.

2. Framer Motion is capable of powering animations in Framer X, a prototyping tool, which makes the hand-off extremely convenient. The majority of designers have suffered a situation when they spend ages perfecting every little detail of design only to have it lost in the development process. Framer Motion lets you use the same animation library both in prototyping and production. This way you don’t need to worry your animations are different from what you’ve intended them to be.

How do I start?

1. Install the Framer Motion package.

npm install framer-motion (if you are using npm)
or
yarn add framer-motion (if you are using yarn)

1. Import the motion component in your file.

import { motion } from 'framer-motion';

1. Try to animate an element using the animate attribute.

⚠️ Remember: you are not using more css syntax or attributes, they all are from Framer Motion

export default function App() {
  return (
    <motion.h2
      animate={{ scale: 1.2 }}
    >
      Yayy, I am animated!!
    </motion.h2>
  )
}

You can notice two important things:

1. motion always comes before the HTML tag (just make sure on the documentation if Framer Motion supports)

2. animate attribute pass an object (like the style={{}})

   1. See my repository about Framer Motion and learn how it works.
   2. See this playlist on YouTube about Framer Motion.

References

LogRocket
Medium

Comments

[Pedro Palhari]

I just want to point out, use the preferred layout prop. The Framer guys are focusing heavily on it and it's likely that the animate prop will be just for controlled animations using the hook useAnimation.

It's almost the same mentality, but you change the style directly and let framer-motion solve the animation for you.

Nevertheless, good article, one of the only reasons I stay in React is framer-motion and jotai.

[Esaú Morais]

Thank you for noticing!! Really good and important to know this

[Ivan Jeremic]

I like the Frame API but they need to improve the performance React-Spring feels less laggy and the animations also look more realistic, if they can catch up in this 2 fields Framer is my first choice.

[Esaú Morais]

Yes, I agree with you

[Web Expert 1102]

Hello Moralis.
I want to make a establish with you on skype as a react developer.
My skype name is freeeup.XueZhe-pan. Please contact me asap. thanks

[Devesh Sawant]

I came upon a few animation libraries in React, specially the spring based ones and am wanting to use them. Thanks for the article on framer motion.

[Ronaldo Hoch]

Does it have a Vanilla or Angular library?

[Esaú Morais]

framer-motion, as in the documentation, was created focusing on React

[Mohd Ahmad]

is there an alternative of framer-motion for vue

I just love framer-motion

[Esaú Morais]

I don't really use Vue.js, but I was searching and found this:

Gsap is a good alternative. But i'm with you that the api of popmotion or react-spring are much more use full.

There is one thing that i found out lately is that 'Enter/Leave & List Transitions' can call javascript functions instead of changing css styles. With this method you can easily animate with gsap.

vuejs.org/v2/guide/transitions.htm...

[vinksz]

@vueuse/motion