{"id":28888,"date":"2024-04-30T01:26:38","date_gmt":"2024-04-30T00:26:38","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/anade-un-toque-magico-a-tus-apps-react-con-animaciones-framer-motion\/"},"modified":"2024-06-03T17:43:09","modified_gmt":"2024-06-03T16:43:09","slug":"anade-un-toque-magico-a-tus-apps-react-con-animaciones-framer-motion","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/add-a-magical-touch-to-your-react-apps-with-framer-motion-animations\/","title":{"rendered":"Add a Magical Touch to Your React Apps with Framer Motion Animations"},"content":{"rendered":"<p>In the world of web development, interaction and movement play crucial roles in the user experience. With React, incorporating animations not only improves the aesthetics of an application, but can also make interactions more intuitive and enjoyable. Today we&#039;ll explore how you can use Framer Motion, a powerful animation library, to bring your React projects to life.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/add-a-magical-touch-to-your-react-apps-with-framer-motion-animations\/#%C2%BFQue_es_Framer_Motion\" >What is Framer Motion?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/add-a-magical-touch-to-your-react-apps-with-framer-motion-animations\/#Empezando_con_Framer_Motion\" >Getting started with Framer Motion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/add-a-magical-touch-to-your-react-apps-with-framer-motion-animations\/#Ejemplos_Basicos_de_Animaciones\" >Basic Examples of Animations<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/add-a-magical-touch-to-your-react-apps-with-framer-motion-animations\/#Controlando_Secuencias_de_Animaciones\" >Controlling Animation Sequences<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/add-a-magical-touch-to-your-react-apps-with-framer-motion-animations\/#Animaciones_Interactivas_con_Gestos\" >Interactive Animations with Gestures<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/add-a-magical-touch-to-your-react-apps-with-framer-motion-animations\/#Mas_Alla_de_lo_Basico\" >Beyond the Basics<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/add-a-magical-touch-to-your-react-apps-with-framer-motion-animations\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_Framer_Motion\"><\/span>What is Framer Motion?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Framer Motion is an animation library for React that makes it easy to implement advanced animations and gestures in your app components. It is relatively easy to use but incredibly powerful in terms of the functionalities it offers, such as advanced pose animations, gesture management, SVG path animation, and more.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Empezando_con_Framer_Motion\"><\/span>Getting started with Framer Motion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To get started, you need to install Framer Motion in your React project. You can easily do this via npm or yarn:<\/p>\n<pre><code class=\"&quot;language-bash&quot;\">npm install framer-motion # or yarn add framer-motion<\/code><\/pre>\n<p>Then it just matters. <code>movement<\/code> from Framer Motion in your component:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">import { motion } from &#039;framer-motion&#039;;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Ejemplos_Basicos_de_Animaciones\"><\/span>Basic Examples of Animations<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>One of the strong points of Framer Motion is its simplicity when declaring animations. Here&#039;s an example of how you can make a component fade and move:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">const MyComponent = () =&gt; { return (  Hello World! ); };<\/code><\/pre>\n<p>In this example, the component <code>div<\/code> It will start invisible and off screen from the left. You will then animate its opacity and position until it is completely visible and centered.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Controlando_Secuencias_de_Animaciones\"><\/span>Controlling Animation Sequences<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Say you want to control a sequence of animations, Framer Motion makes it surprisingly easy with its prop <code>variants<\/code>. This allows you to define a variants object for different component states, and then simply reference those states in your components. Here I show you how:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">const variants = { hidden: { opacity: 0, x: -100 }, visible: { opacity: 1, x: 0 }, }; const MyComponent = () =&gt; { return (  Look how I move! ); };<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Animaciones_Interactivas_con_Gestos\"><\/span>Interactive Animations with Gestures<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Framer Motion also makes working with gestures like swipes and taps really easy. For example, you can have a button perform an action when pressed and then return to its original state when released:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">const buttonVariants = { tap: { scale: 0.8 }, hover: { scale: 1.1 } }; const MyButton = () =&gt; { return ( press me ); };<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Mas_Alla_de_lo_Basico\"><\/span>Beyond the Basics<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>While the examples above show the basics, Framer Motion is capable of much more. From SVG path animations, to drag effects, and full page transitions that can really make your app stand out.<\/p>\n<p>If you&#039;re interested in taking your Framer Motion skills to the next level, I invite you to explore the <a href=\"https:\/\/www.framer.com\/api\/motion\/\" rel=\"nofollow noopener\" target=\"_blank\">official documentation<\/a> where you will find detailed guides, examples and an active community that can help you resolve any questions.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Framer Motion offers a robust, easy-to-use solution for adding fluid and dynamic animations to your React apps. With just a few lines of code, you can start experimenting with animations that will significantly improve the interactivity and visual appeal of your projects.<\/p>\n<p>If you have questions about how to implement Framer Motion in your project or need help with an animation challenge, feel free to <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">contact me<\/a>.<\/p>\n<p>Remember, good design and smooth interaction can take the user experience to a whole new level. Explore, experiment, and animate with confidence using Framer Motion! For more guides and tips on web development, be sure to visit <a href=\"https:\/\/nelkodev.com\/en\/\">my blog<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>In the world of web development, interaction and motion play crucial roles in the user experience. With React, incorporating animations not only improves the aesthetics of an app, but can also make interactions more intuitive and enjoyable. Today we\u2019ll explore how you can use Framer Motion, a powerful animation library, to create [\u2026]<\/p>","protected":false},"author":1,"featured_media":28889,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1939],"tags":[1044,684,540,205,90,2000,2205,2001,1052,1008,234,1872,122],"class_list":["post-28888","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-pruebas-de-frontend","tag-anade","tag-animaciones","tag-apps","tag-blog","tag-con","tag-framer","tag-frontend","tag-magico","tag-motion","tag-pruebas","tag-react","tag-toque","tag-tus"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=28888"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28888\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28889"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}