framer-motion

Framer is an open-source motion library for React, created by Framer.

Motion powers Framer, a web builder for creative professionals.

You can design and launch your dream site with no special coding required and enjoy maximum speed.

Features

  1. Declarative: Framer Motion follows the declarative paradigm of React. This means that animation states can be described declaratively, allowing the library to handle the transitions. This approach enhances code readability and makes maintenance easier.

  2. Easy Animation Control: Framer Motion provides a concise API for controlling animation states, such as starting, stopping, and repeating animations. This makes it easy to implement complex interactions.

  3. Natural Motion: Framer Motion supports physics-based animations to mimic real-world movements, offering effects that resemble natural and smooth motion. This helps create a more immersive user experience.

  4. Server-Side Rendering (SSR) Compatibility: Framer Motion seamlessly supports server-side rendering, contributing to SEO optimization and improving initial page loading performance.

  5. Rich Features: Framer Motion offers various features, including drag functionality, SVG path animations, instant page transitions, scroll animations, and more.


Installation

Installing Framer Motion is very straightforward. Simply execute npm install framer-motion. This will add the Framer Motion library to the node_modules directory of your project.

Caution

  • Name
    Node.js and npm Versions
    Type
    Caution
    Description

    Ensure that you have the latest versions of Node.js and npm. This is an important step to prevent any issues while installing or using the library. To check the versions of Node.js and npm, you can run node -v and npm -v in the terminal.

  • Name
    Project Compatibility
    Type
    Caution
    Description

    Verify the compatibility of Framer Motion with other packages in your project. In case of version conflicts between packages, unexpected problems may occur.

  • Name
    Development Environment
    Type
    Caution
    Description

    Framer Motion is used in React-based projects, so React must be installed in your project. Additionally, familiarity with JSX syntax is required to understand and use Framer Motion effectively.

Installation

npm install framer-motion

Usage

Framer Motion is a highly user-friendly animation library. Let me explain the basic usage below.

  • Name
    import
    Type
    Usage
    Description

    First, you need to import the Framer Motion library in the component file where you want to use it.

  • Name
    Basic Usage
    Type
    Usage
    Description

    Then, you can replace the desired HTML tags with the corresponding Framer Motion's motion.[tag] elements. For example, if you want to animate a div, you can do it like this:

import

import { motion } from "framer-motion";

Basic Usage

<motion.div>
  Hello, world!
</motion.div>

Customization

Framer Motion is a powerful and flexible library that provides various features and APIs to implement more complex animations and interactions, in addition to the basic usage explained above. You can find more information in the official documentation.

Explanation

  • Name
    Fade-in
    Type
    Customization
    Description

    To add animations, you can use the animate prop to specify the animation states. For example, to smoothly fade in a div, you can do the following:

  • Name
    Initial State Setup
    Type
    Customization
    Description

    You can set the initial state using the initial prop.

Fade-In

  <motion.div animate={{ opacity: 1 }}>
    Hello, world!
  </motion.div>

Initial State Setting

  <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
    Hello, world!
  </motion.div>

Example

Here is an animation example using Framer Motion. In this example, we are using the <motion.div> element, which is a special div provided by the Framer Motion library. This element allows you to apply CSS transformations, transitions, and other animation effects.

Additional Explanation

  • Name
    initial prop
    Type
    Example
    Description

    This prop defines the initial state of the animation. In this case, the <motion.div> element starts with an x-axis translation of 500px (x: 500), opacity of 0 (opacity: 0), and a scale of 0.5, which is 50% of the original size.

  • Name
    animate prop
    Type
    Example
    Description

    This prop defines the final state of the animation. In this case, the <motion.div> element returns to its original position (x: 0), has an opacity of 1 (opacity: 1), and returns to its original size (scale: 1).

  • Name
    transition prop
    Type
    Example
    Description

    This prop defines the transition of the animation. In this case, the animation has a duration of 1 second (duration: 1).


Therefore, this code creates an animation where the <motion.div> element starts in an initially hidden state (transparent, 50% of the original size, translated by 500px on the x-axis), gradually becomes visible over a duration of 1 second (increasing opacity), returns to its original position (gradually moving back to the original position on the x-axis), and returns to its original size (gradually increasing in size).

Header.jsx

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