🚄 Framer motion

🤔 What is Framer motion?

An open source React library to power production-ready animations.


It's an amazing react animation library that allows you to easily add animations to your site all through Javascript. It's also really fast using your GPU to achieve 60 FPS animations.

🔗Check out their site, its pretty...cool 🧊


$ npm i framer-motion --save

import {motion} from 'framer-motion';

<motion.div>I'm animatable</motion.div>

🏃🏼‍♀️Let's animate an element!

To start animating, we just have to convert an HTML element, into a <motion.element />.

Then you can set an initial prop and an animate prop to get started!

It's super easy, here are some examples of what you can animate:

  • opacity
  • scale
  • skew
  • rotate
  • x
  • y

We can also control the duration and delay with a transition prop.

You can also do these on hover and tap! 👆🏼

Framer motion uses these things called variants

Variants allow you to define animation states and organize them by name.

They allow us to control animations throughout a component tree by switching a single animate prop.

This is great for orchestration!

Drag, is no longer a drag

To make a component draggable, you just add a drag prop and what axis you want it to drag on.

If you don't want the element to be yeeted off the page, you can add the dragContraints prop.

If you want the dragContraints to be the size of the parent's, you can pass it the
parents dragContraints={parentRef}.


You can create scroll animations with the useViewportScroll hook framer motion provides. You can create effects like parallax or progress bars!

Let's put it all together!

Let's make a modal with everything we have learned.

Made with ❤️ with GatsbyJS

Developed by Alexander Melo