Getting Started with Framer Motion - An Overview and Walkthrough Tutorial.

Web animations are being used on all kinds of websites/ web pages. from small web animations that activate when scrolling through a web page to draw attention to a particular content, an animation that demonstrates a product, or a promotional web animation that shows off something entertainingly and engagingly. In this tutorial, we'll be looking at how to add an animation to your React app using Framer motion.

Prerequisites.

Framer motion works with React, before getting started you should have the following:

• Basic Knowledge of React.js
• Basic Knowledge of ES6 JavaScript.
• Node.js installed.
• NPM or YARN installed.

What is Framer Motion?

Framer Motion is a production-ready motion/animation library for React.
It's easy to create Animation with Framer Motion, It has simple and declarative syntax, you write less code, this means you'll have clean, readable and maintainable codebase. With a few lines of code, you can create a production-ready animation.

What are the Pros and Cons.

Pros.

The following are some pros of Framer Motion:

• It's simple and easy to use, and it's being used with React.
• You can animate SVGs, it provides some additional properties for those animations.
• It Supports Server-side rendering, you can use it with Next.js.
• It has supports for CSS variables.
• It has built-in event listeners and also makes use of React-based event listeners.
• It has gesture detections like hover, tap, drag, and pan that is being used in the animation.

Cons.

• It is not supported on Internet Explorer 11 (IE11).
• It works with React.js and it's frameworks only.

Installation

Framer Motion can be added to your React project by installing it using npm or yarn.
Using npm:

npm install framer-motion

Using yarn:

yarn add framer-motion

Usage

It is quite simple to use framer motion in your React projects, by importing motion to your project.

import { motion } from "framer-motion";

Then you can create an animation in the component.

export const MyAnimationBox = () => {
    return (
        <motion.div
            animate={{
                x: 0,
                y: 0,
                scale: 0.7,
                rotate: 0,
            }}
        />
    )
}

Features.

There are lots of features of the Framer Motion library, I'll list but a few.

Animation.

Animations in Framer Motion are controlled by the motion component's animate property.

 import { motion } from "framer-motion";

export const MyAnimationBox = () => {
    return (
        <motion.div
            animate={{
                x: 0,
                y: 0,
                scale: 0.7,
                rotate: 0,
            }}
        />
    )
}

Example:

It can be used to create different types of animation based on your needs.

Transitions:

Transitions are used to create appropriate animation, by providing options like:

• duration: the total time the animation should occur.
• ease: the type of transition ease
• delay: The time that should elapse before the animation starts. etc.

Gestures.

Gestures are actions taken on an element. Let's look at Gestures in Framer motion. Gestures in Framer Motion Includes:

• Hover
• Tap
• Drag
• Pan It can be used in different ways, based on the current state of the gesture.

  Hover

  whileHover

  Used to properties or variant label to animate to while the hover gesture is recognised.

import { motion } from "framer-motion";

export const HoverToRotate = () => {
    return (
        <motion.div
            whileHover={{rotate: 120}}
        />
    )
}

This animation happens while the mouse is over the target element until it leaves.
There are other hover gestures like onHoverStart and onHoverEnd which receives a callback function that fires depending on the state of the pointer.

Example:

Tap

The tap gesture detects when a pointer presses down and releases on the same component.

Pan

The pan gesture recognises when a pointer presses down on a component and moves further than 3 pixels. it has the following callback functions :

• onPan
• onPanStart
• onPanEnd which are triggered a the appropriate time.

function onPan(event, info) {
  console.log("Pan:",info.point.x, info.point.y)
}
function onPanStart(event, info) {
  console.log("Pan Start: ",info.point.x, info.point.y)
}
function onPanEnd(event, info) {
  console.log("Pan End: ",info.point.x, info.point.y)
}

<motion.div onPan={onPan} onPanStart={onPanStart} onPanEnd={onPanEnd} />

Drag

The drag gesture follows the rules of the pan gesture but applies pointer movement to the x-axis and/or y-axis of the component.
Setting the drag property to "x" or "y" enables you to drag it to the selected axis.

...
<motion.div drag="y" />
...

It has a lot of callback functions like: ``

Example:

Variants

Variants are pre-defined visual states that a component can be in. By giving a component and its children variants with matching names, whole React trees can be animated by changing a single prop.

import { motion } from "framer-motion"

const variants = {
  open: { opacity: 1, x: 0 },
  closed: { opacity: 0, x: "-100%" },
}

export const SideNav = () => {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <motion.nav
      animate={isOpen ? "open" : "closed"}
      variants={variants}
    >
      <Toggle onClick={() => setIsOpen(!isOpen)} />
      <Items />
    </motion.nav>
  )
};

Example:

Scroll

Scroll animations can be driven with the convenient useViewportScroll hook. It returns four MotionValues that update when the viewport scrolls for effects like parallax, or scroll progress indicators.

Example:

Conclusion.

Now you can see why Framer Motion is Awesome.
Framer Motion has more features, I just scratched the surface. I'll write more about it in subsequent articles. Follow me on Twitter: @NzakiCodes , Facebook Nzaki Michael Ekere and on Hashnode @NzakiCodes.

Thank You :).

Credits

• Framer Motion Docs
• What Is Framer Motion – Bring Your Website To Life! by Joanna Dyszkiewicz
• Toptal blog