{"id":8263,"date":"2025-07-25T09:32:46","date_gmt":"2025-07-25T09:32:45","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=8263"},"modified":"2025-07-25T09:32:46","modified_gmt":"2025-07-25T09:32:45","slug":"creating-animated-ui-with-framer-motion-10","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/creating-animated-ui-with-framer-motion-10\/","title":{"rendered":"Creating Animated UI with Framer Motion"},"content":{"rendered":"

Creating Animated UI with Framer Motion<\/h1>\n

In the modern web development landscape, the need for engaging and dynamic user interfaces is more critical than ever. As developers, we aim to create applications that are not only functional but also captivating. One powerful library that has taken front-end animation to the next level is Framer Motion<\/strong>. This blog will guide you through the fundamental concepts of using Framer Motion to create mesmerizing UI animations.<\/p>\n

What is Framer Motion?<\/h2>\n

Framer Motion is an open-source library designed for React applications. It provides a simple and declarative way to create animations and transitions. Built on top of the powerful Framer API, it allows developers to bring life to their applications while still being easy to use and integrate. With features like gestures, layout animations, and shared layout transitions, Framer Motion simplifies complex animations and keeps your code organized.<\/p>\n

Getting Started with Framer Motion<\/h2>\n

Before diving into animations, you need to set up your development environment. If you have a React application up and running, you can install Framer Motion via npm:<\/p>\n

npm install framer-motion<\/code><\/pre>\n
Once installed, you can import the necessary components in your React application:<\/p>\n
import { motion } from 'framer-motion';<\/code><\/pre>\n
Defining Basic Animations<\/h2>\n
Framer Motion allows you to animate almost any React component. Let’s start with a simple example. This example demonstrates how to create a bouncing box using Framer Motion.<\/p>\n
Example: Bouncing Box<\/h3>\n
Here\u2019s the code to create a simple bouncing box:<\/p>\n
import React from 'react';\nimport { motion } from 'framer-motion';\n\nconst BouncingBox = () => {\n    return (\n        \n    );\n};\n\nexport default BouncingBox;<\/code><\/pre>\n
In this example:<\/p>\n
    \n
  • The motion.div<\/strong> applies the animation to a simple div element.<\/li>\n
  • The animate<\/strong> prop defines a y-axis movement, creating a bouncing effect.<\/li>\n
  • The transition<\/strong> prop controls the duration and repeats the animation infinitely.<\/li>\n<\/ul>\n
    Using Gesture-Based Animations<\/h2>\n
    Framer Motion also supports gesture-based animations, such as dragging and hovering. This allows developers to create interactive UI elements that respond to user input.<\/p>\n
    Example: Dragging an Element<\/h3>\n
    Let\u2019s enhance our bouncing box example by making it draggable:<\/p>\n
    import React from 'react';\nimport { motion } from 'framer-motion';\n\nconst DraggableBox = () => {\n    return (\n        \n    );\n};\n\nexport default DraggableBox;<\/code><\/pre>\n
    In this code:<\/p>\n
      \n
    • The drag<\/strong> prop makes the div element draggable.<\/li>\n
    • The dragConstraints<\/strong> prop limits the draggable area to a specified range.<\/li>\n<\/ul>\n
      Creating Transitions Between States<\/h2>\n
      Framer Motion shines when it comes to transitioning between different UI states. You can animate elements entering and leaving the DOM, which enhances the user experience during navigation.<\/p>\n
      Example: Conditional Rendering with Transitions<\/h3>\n
      Here is how to implement a simple modal that appears and disappears with animations:<\/p>\n
      import React, { useState } from 'react';\nimport { motion } from 'framer-motion';\n\nconst Modal = () => {\n    const [isOpen, setIsOpen] = useState(false);\n\n    return (\n        \n