Beginner's Introduction to framer-motion

Gone are the days when animating a website section used to take many lines of code in the CSS files. With the advent of different libraries (and trust me, there are too many), animating websites has become way more straightforward than it had been some years ago. We will learn about one such animation library for React - Framer Motion.

What is Framer Motion?

Simply put, Framer motion is an animation library for React that enables users to create immersive and appealing animated components in a React application. You can use this library to use the pre-built animated components or customize your animation.

This will be a super-easy introduction to Framer motion for beginners. For detailed usage, refer to the official docs (Framer Motion). Let's get started!

Installing and importing Framer Motion

To install the Framer-Motion library on your local machine, ensure that you have node.js installed. If not, install node.js from the official website.

After installing node.js, open your terminal, navigate to your project directory, and run npm install framer-motion command.

Now, import the library to your React component as follows:

import React from 'react'
import {motion} from 'framer-motion' //import framer-motion 

export default function functionName(){
    return <p>Hello World</p>
}

Animating React components

You can animate anything with Framer Motion literally. Just add motion. as a prefix to the element tag, your element can now animate.

import React from 'react'
import {motion} from 'framer-motion' //import framer-motion 

export default function functionName(){
    return <motion.div> Hello world </motion.div>;           
}

Creating our first animation

Let us consider that you are building a landing page for your client. As soon as the page loads, some introductory text slides in from the horizontal to the main screen (See this website for reference).

Let us create a similar type of animation using Framer Motion.

import React from "react";
import "./app.css"; //put your own styles here
import { motion } from "framer-motion"; //import framer-motion

export default function App() {
  return (
    <motion.div
      className="container"
      animate={{ opacity: [0, 1], x: [-100, 0] }}
      transition={{ duration: 0.5, type: "spring", stiffness: 200, ease: "linear" }}
    >
      <h1 className="title">Title</h1>
      <h3 className="content">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit.     
        veritatis ducimus illo voluptas esse, architecto laudantium 
        lorem ipsum
      </h3>
    </motion.div>
  );
}

Let's understand the above code in detail.

We have created a div-element (with className .container) and converted it into a motion component (<motion.div>). We have placed some dummy content inside it and styled it using style.css file.

Once we create a motion component, we can pass different props to it (like in a custom React component). Here, we have passed two props, namely animate and transition. (Note: Props usually accept a JavaScript object).

animate: This prop defines the starting and ending states of animation.

opacity: [0,1] - The div element starts from opacity = 0 to opacity = 1.
x: [-100,0] - The div element moves in the x-direction from x = -100px to x = 0px. (A similar property can be for the y-direction, e.g. y:[-200,100] )

transition: This prop defines how the transition occurs between the initial and final states defined by the animate prop. It has various properties.

duration: 0.5 - the animation runs for 0.5 seconds.
type: 'spring' & stiffness: 200 - the animation occurs like a spring with a stiffness of 200 (can be any number).
ease: 'linear' - defines the ease with which the animation will run. This is precisely similar to that used in CSS animations.

Congratulations!! You have created your first-ever animation using Framer Motion. Now let's learn about some more simple animation props which are most commonly used.

Some more animation props

Framer Motion offers loads of other animation features, props, and components, but we will restrict it to some simple ones that are helpful for beginners.

whileHover: This prop triggers the animations when the user hovers over the motion component. This can help animate Contact Cards or menu items on a website.

  /* 
  When user hovers over the .container element, 
          - it scales to 1.5 times its original size (similar to          
            transition:scale(1.5) property in CSS)
          - the background color changes to yellow 
  */
      <motion.div
        className="container"
        animate={{ opacity: [0, 1], x: [-100, 0] }}
        transition={{ duration: 0.5, type: "spring", stiffness: 200, ease: "linear" }}
        whileHover={{ scale:1.5, backgroundColor:"yellow" }}
      > ... </motion.div>

whileInView: This prop triggers the animations when the motion component is in the viewport. This helps animate a section of a website when the user scrolls to that section.

Conclusion

I hope you learned something new from this blog post. I have tried to keep everything simple and how I have learned these concepts. I will cover other aspects of Framer Motion in another blog post.

Till then, keep learning!

Abhijeet Gautam's Blog