Framer-Motion Introduction and Installation

Framer-motion is an open-source, production-ready animation and gesture library for React. It provides a high-level API that simplifies adding animations and gestures while keeping the code minimal and readable.

Unlike CSS animations or other animation libraries, Framer Motion integrates seamlessly with React and offers features like gesture handling, layout animations, and drag animations. This makes it a preferred choice for building fluid UI interactions, dynamic animations, and responsive user experiences.

Key Features of Framer Motion

• Declarative Animations: Motion uses a simple, declarative API, allowing developers to define animations directly in their JSX code, making it intuitive and easy to work with.
• Smooth Transitions: The library provides built-in support for smooth transitions between different states of a component (like opacity, position, scale, and rotation), ensuring a seamless user experience.
• Gesture-based Animations: Framer Motion allows you to trigger animations based on user gestures, such as hover, tap, drag, or while the user is scrolling. This creates more interactive and dynamic UI elements.
• Page Transitions: The library supports smooth page transitions, which can be especially useful in single-page applications (SPAs) to enhance the user experience when navigating between views or routes.
• Customizable and Flexible: Framer Motion offers extensive control over animations with properties like timing, easing functions, and variants, allowing you to create complex and customized animations that fit your needs.

Components of Framer Motion

• Motion Components: Motion components (e.g., <motion.div/>, <motion.circle/>) are the core of the Motion API, allowing you to animate any HTML or SVG element with additional props to handle gestures and animations easily.
• Animate Presence: This component is used for unmounting animations. It animates elements when they are removed from the React tree, providing smooth transitions during component removal.
• Layout Group: LayoutGroup groups motion components that should perform layout animations together, allowing for smooth transitions and animations when components change their layout within the parent container.
• Lazy Motion: LazyMotion helps reduce the bundle size by loading motion component features synchronously or asynchronously, optimizing performance by only loading the required features.
• Reorder: The Reorder component enables drag-to-reorder functionality, perfect for creating reorderable lists or items like to-do lists or tabs with simple drag-and-drop behaviour.

Steps to Install and Implement Framer Motion

Step 1: Creating React Application

Create a React application using the following command.

npx create-react-app demo
cd demo

Step 2: Install Framer Motion

First, ensure that you have the Framer Motion library installed. Open your terminal and run the following command:

npm install framer-motion

Step 3: Import motion from Framer Motion

In your App.js file, you need to import the motion component from the framer-motion library to animate the elements.

import { motion } from "framer-motion";

Step 4: Create a Motion Component

You can now replace your standard JSX tags with their animated versions provided by Framer Motion.

In this example, we are using <motion.div> instead of <div>. This allows us to apply animations to the <div> element.

<motion.div style={{
    color: 'green',
    fontSize: 20,
    width: '300px',
    height: '30px',
    textAlign: 'center',
    border: '2px solid green',
    margin: '40px'
}}>
    GeeksforGeeks
</motion.div>

Step 4: Add Hover Effect

Framer Motion makes it easy to add interactive animations.

In this example, we're adding a whileHover animation, which will be triggered when the user hovers over the element. Here, we are applying the scale property inside whileHover to scale the element down when the mouse hovers over it:

<motion.div
    style={{
        color: 'green',
        fontSize: 20,
        width: '300px',
        height: '30px',
        textAlign: 'center',
        border: '2px solid green',
        margin: '40px'
    }}
    whileHover={{ scale: 0.5 }} 
>
    GeeksforGeeks
</motion.div>

Final App.js file

//App.js

import React from "react";
import { motion } from "framer-motion";

function App() {
    return (
        <motion.div style={{
            color: 'green',
            fontSize: 20,
            width: '300px',
            height: '30px',
            textAlign: 'center',
            border: '2px solid green',
            margin: '40px'
        }}

            whileHover={{ scale: 0.5 }}
        >
            GeeksforGeeks
        </motion.div>
    );
}

export default App;

• Motion Component: The motion.div is a Framer Motion component that adds animation capabilities to the regular div element. It allows you to animate its properties such as scale, opacity, and position.
• Hover Animation: The whileHover prop is used to animate the div when the user hovers over it. In this case, the scale property is set to 0.5, causing the element to shrink on hover.
• Inline Styling: The div has inline styles applied to it, including color, font size, width, height, border, and margin, making it visually distinct and positioned in the center of the page.

Output

Framer Motion Events

Framer Motion provides a set of event handlers that can be used to control and respond to animations. These events give you more control over when and how animations happen. They can be used for triggering specific actions or behaviors during the lifecycle of an animation.

Here are some key Framer Motion events:

1. onAnimationComplete

The onAnimationComplete event is triggered once the animation finishes. This is helpful when you want to perform an action or trigger something after an animation has completed, such as navigating to a new page, showing a success message, or triggering another animation.

<motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    onAnimationComplete={() => console.log("Animation completed!")}
>
    Content fades in
</motion.div>

2. onUpdate

The onUpdate event is triggered continuously during the animation’s lifecycle. We can use this event to track the progress of an animation or trigger real-time updates based on animation values, such as dynamically updating a progress bar.

<motion.div
    animate={{ x: 100 }}
    transition={{ duration: 2 }}
    onUpdate={(latest) => console.log(latest)}
>
    Moving div
</motion.div>

3. onHoverStart and onHoverEnd

These events are triggered when the user interacts with an element by hovering over it (onHoverStart) and when the user stops hovering (onHoverEnd).

<motion.div
    onHoverStart={() => console.log("Hovered!")}
    onHoverEnd={() => console.log("Hover ended!")}
    whileHover={{ scale: 1.2 }}
>
    Hover over me!
</motion.div>

4. onTapStart, onTap, and onTapEnd

These events are triggered during tap gestures on mobile devices, but they can also be used for clicks on any device.

<motion.button
    onTapStart={() => console.log("Tap started")}
    onTap={() => console.log("Tapped")}
    onTapEnd={() => console.log("Tap ended")}
>
    Tap me!
</motion.button>

5. onDragStart, onDrag, and onDragEnd

These events are used with draggable elements. They allow you to handle the start, movement, and end of dragging actions.

<motion.div
    drag
    dragConstraints={{ left: 0, right: 200 }}
    onDragStart={() => console.log("Drag started")}
    onDrag={(e, info) => console.log("Dragging", info.point)}
    onDragEnd={() => console.log("Drag ended")}
>
    Drag me around
</motion.div>

Conclusion

Framer Motion is a powerful and user-friendly animation library for React that simplifies the creation of smooth, interactive animations. Its declarative API, combined with features like Optimized for Performance, layout transitions, and Gestures and Interactions, makes it an ideal choice for building dynamic user interfaces. With easy installation and seamless integration into React projects, Framer Motion enhances the user interface and user experience of web applications while keeping the codebase simple and maintainable.