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

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

In the realm of web development, an engaging user interface (UI) can greatly enhance the user experience (UX). Among the various tools available for creating animations, Framer Motion<\/strong> has emerged as a favorite among developers. In this blog post, we\u2019ll delve into how Framer Motion can help you create stunning animated UIs that not only captivate your users but also improve interactivity and accessibility.<\/p>\n

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

Framer Motion is a powerful animation library specifically designed for React applications. It provides a simple API for animating components with impressive results. Whether you’re creating micro-interactions, sophisticated transitions, or immersive visual effects, Framer Motion makes the process both intuitive and efficient.<\/p>\n

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

To start using Framer Motion in your React application, you will need to install it via npm. Open your terminal and run:<\/p>\n

npm install framer-motion<\/code><\/pre>\n
Once installed, you can import the necessary components from the library. Here\u2019s a simple example of how to set up your first Framer Motion animation:<\/p>\n
\nimport { motion } from 'framer-motion';\n\nfunction Box() {\n    return (\n        \n    );\n}\n\nexport default Box;\n<\/code><\/pre>\n
In this code snippet, we created a simple box component that fades in and out when it is mounted or unmounted. The motion.div<\/strong> replaces a regular div<\/strong> to enable animations.<\/p>\n
Basic Animations with Framer Motion<\/h2>\n
Framer Motion provides a rich set of properties that can be animated. Here\u2019s a breakdown of some crucial properties:<\/p>\n
    \n
  • initial<\/strong>: Sets the starting state of the animated component.<\/li>\n
  • animate<\/strong>: Specifies the end state of the component.<\/li>\n
  • exit<\/strong>: Defines how the component will animate when it is removed from the DOM.<\/li>\n
  • transition<\/strong>: Controls the timing of the animation, including duration and easing.<\/li>\n<\/ul>\n
    Example: Scaling and Rotating a Box<\/h3>\n
    Let\u2019s enhance our previous example by adding scaling and rotation to the animations:<\/p>\n
    \nfunction AnimatedBox() {\n    return (\n        \n    );\n}\n\nexport default AnimatedBox;\n<\/code><\/pre>\n
    In this example, the box scales up to its normal size while rotating 360 degrees when it is displayed. Using transformations like scale and rotate can add a layer of visual appeal to your applications.<\/p>\n
    Keyframe Animations with Variants<\/h2>\n
    Framer Motion\u2019s variants<\/strong> feature allows you to define multiple animation states and easily switch between them. This is particularly useful for coordinated animations. Here\u2019s how you can use variants:<\/p>\n
    \nconst boxVariants = {\n    hidden: { opacity: 0, scale: 0 },\n    visible: { opacity: 1, scale: 1 },\n    exit: { opacity: 0, scale: 0.5 }\n};\n\nfunction VariantBox() {\n    return (\n        \n    );\n}\n\nexport default VariantBox;\n<\/code><\/pre>\n
    In this code, we define three states for the box: hidden, visible, and exit. The box will transition smoothly between these states based on the variants provided.<\/p>\n
    Gesture-Driven Animations<\/h2>\n
    Framer Motion supports gesture-based interactions, allowing for a more interactive experience. Lets explore how to implement drag functionality:<\/p>\n
    \nimport { motion } from 'framer-motion';\n\nfunction DraggableBox() {\n    return (\n        \n    );\n}\n\nexport default DraggableBox;\n<\/code><\/pre>\n
    In this example, the box can be dragged within the defined constraints. While being dragged, it scales up and rotates slightly, providing visual feedback to users.<\/p>\n
    Integrating Animations with Route Changes<\/h2>\n
    When navigating between different views in a React application, smooth transitions can significantly enhance user experience. Framer Motion can easily animate components during route changes. Here\u2019s how to implement a simple route transition:<\/p>\n
    \nimport { motion, AnimatePresence } from 'framer-motion';\nimport { BrowserRouter as Router, Route, Switch, useLocation } from 'react-router-dom';\n\nfunction App() {\n    const location = useLocation();\n\n    return (\n        \n            \n                \n                \n            \n        \n    );\n}\n<\/code><\/pre>\n
    In the above snippet, when you switch between pages, the AnimatePresence<\/strong> component animates the entrance and exit of routes gracefully.<\/p>\n
    Advanced Features of Framer Motion<\/h2>\n
    Framer Motion also supports more advanced features like:<\/p>\n
      \n
    • Layout animations<\/strong>: Smooth transitions when components change position in the layout.<\/li>\n
    • Shared layout transitions<\/strong>: Create animations that connect two components when moving between views.<\/li>\n
    • Custom easings<\/strong>: Specify custom easing curves for even more control over your animations.<\/li>\n<\/ul>\n
      Example: Layout Animation<\/h3>\n
      Here\u2019s how to implement layout animations using the key property:<\/p>\n
      \nfunction LayoutAnimationExample() {\n    const [isToggled, setToggled] = useState(false);\n    \n    return (\n        
      \n             setToggled(!isToggled)} style={{ width: 100, height: 100, backgroundColor: 'orange' }}>\n                {isToggled ? \"Toggled!\" : \"Click Me!\"}\n            \n        <\/div>\n    );\n}\n\nexport default LayoutAnimationExample;\n<\/code><\/pre>\n
      In this example, clicking the box triggers a layout animation that adjusts the displayed text while providing a smooth transition.<\/p>\n
      Best Practices for Using Framer Motion<\/h2>\n
      To ensure your animations are both performance-friendly and visually appealing, consider the following best practices:<\/p>\n
        \n
      • Keep animations smooth and lightweight<\/strong>: Avoid excessive animations that could distract or confuse users.<\/li>\n
      • Use easing functions<\/strong>: Utilize natural easing functions to make transitions feel more organic.<\/li>\n
      • Limit animations during critical user interactions<\/strong>: Make sure animations don\u2019t hinder important user actions, such as form submissions.<\/li>\n<\/ul>\n
        Conclusion<\/h2>\n
        Framer Motion is a powerful tool that empowers developers to create delightful animated UIs with ease. By understanding its core features, such as basic animations, variants, and gestures, you can add a layer of interactivity and engagement to your React applications. Whether you\u2019re animating components during route transitions or enhancing user interactions, Framer Motion is versatile enough to meet your needs.<\/p>\n
        As you experiment with this library, remember to prioritize performance and user experience to strike the right balance. Happy animating!<\/p>\n","protected":false},"excerpt":{"rendered":"
        Creating Animated UI with Framer Motion In the realm of web development, an engaging user interface (UI) can greatly enhance the user experience (UX). Among the various tools available for creating animations, Framer Motion has emerged as a favorite among developers. In this blog post, we\u2019ll delve into how Framer Motion can help you create<\/p>\n","protected":false},"author":101,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[285],"tags":[397],"class_list":["post-7536","post","type-post","status-publish","format-standard","category-system-design","tag-system-design"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7536","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/101"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=7536"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7536\/revisions"}],"predecessor-version":[{"id":7537,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7536\/revisions\/7537"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=7536"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=7536"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=7536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}