Get started with framer-motion

framer-motion - it's probably that one React framework  you always promise you'll learn over the weekend and that this time you'll definitely do it but something pops up or you see these weird <motion.div /> components and think maybe next week will be better.

Hey just a heads up, this is Part 1 of an upcoming framer-motion series, if you'd like to get notified when part 2 drops then sign up for the newsletter at the bottom of the post!

That might be a super specific scenario but that's how I started out with framer-motion 😆. 2 years later, I'm still going strong with the framework and in this series of blog posts I'll walk you through getting starting to shipping production animations 🚀.

What is framer-motion?

Good question. I probably should have opened with an answer to that.

framer-motion is a React library that lets you build animations into your React projects.

If you're familiar with JavaScript animation frameworks like GSAP or anime.js (or god forbid jQuery UI) then you kinda already know the deal with framer-motion. If you don't know these libraries, that's totally okay!

Alright let's jump into some actual code 🏃‍♂️.

Installing framer-motion

First things first, we need to install framer-motion into any React-based project.

You can use any metaframework for this: NextJS, Astro, etc., as long as it runs React.

Run the following to install framer-motion into your project

npm i framer-motion

Then, import something called motion from the framer-motion package. This is a named import!

import {motion} from "framer-motion"

The motion component lets you define animations

Alright, this motion component is special, so listen up.

It's how you define your animations within framer-motion.

It also replaces your regular JSX tags like <div />, <h1 />, <a />, which is kinda wierd but don't worry, checkout the snippet below to see how you use a motion component:

import { motion } from "framer-motion"

<motion.div />
<motion.h1 />
<motion.a />

This is pretty smart on framer-motion's part. Rather than explictly importing a special Div, H1, or A components, framer-motion just bundles these all under their motion component.

When the site gets built out, it actually just renders the tag as you'd expect (we're gonna talk all about what motion components look like in a later blog post).

Use initial and animate props to define basic animations

So, to get animating you'll need to make use of these initial and animate props with your motion component.

If you've ever used the style prop to throw in some ad-hoc styles then you're pretty much familiar with initial and animate. That's right, these two props actually accept the same CSS properties as your style prop.

If you aren't familiar with the style prop then checkout the React docs on how to use style.

animate is considered the to state in framer-motion. It's where you want your animation to end up.

initial is the opposite, it's your from state. It's where you want your animation to start at.

So, with that knowledge in mind, let's animate our first motion component by making a box, then fading it in and moving it to the right by 500px as well as making it two times bigger:

import {motion} from "framer-motion"

<motion.div
	initial={{opacity: 0}}
	animate={{opacity: 1, x: 500, scale: 2}}
/>

🎉 You've just made your first framer-motion animation!