Framer Motion – Animation library bá cháy cho React web

Tired of working with immobile websites? Want to breathe life into your web applications? You want to do something more vivid, more creative. So what are you waiting for without using [**Framer Motion**](https://www.framer.com/motion/)? ? Let’s explore some interesting things with this library.  # A little “background” Framer Motion is an **animation/motion library** picture/motion? Framer Motion is developed by [Matt Perry](https://github.com/mattgperry) specifically for applications, websites built using ReactJS, is a *high level* library built from the ground up. try is [Popmotion](https://popmotion.io/) (same author). *High level* here means that inside the library, a lot of extremely complex motion logic and mechanisms have been handled inside, providing a set of explicit, easy-to-use and flexible APIs, helping us to lighten our heads and have time to sip a cup of coffee ☕ while working with this library. > For those of you interested in the author, besides Framer Motion and Popmotion, Matt also developed [Motion One](https://motion.dev/) (just a pet project of mine ?), an animation Another library uses the modern Web Animations API, which is super compact in size, but super fast and just as easy to use. # How do you burn? Some of the outstanding features listed by the author and development team on the main [home page](https://www.framer.com/motion/) are as follows: * Simple, concise animation declaration syntax – > reduce the amount of code -> easy to read and maintain codebase. * Animation between two components is automatically handled in a very “magic” way. * Supports many complex operations and event listeners such as: tap, drag, hover, viewport… * Many types of animations such as **spring** (natural elastic movement), **tween** (shifting) time-based) or **inertia** (inertial motion) are “instant noodles”, we can use immediately without any installation, or can still easily install and Full control over the animation at will. * And many more features such as support for SSR, unmount animation, accessibility… and so on…  To see the burniness of Framer Motion through a visual example, I made a codepen that reconstructs the common layout of an e-commerce website like below, please refer to it: {@embed : https://codepen.io/khangnd/pen/QWQLwjg} This layout consists of 3 main arrays: * **header** bar at the top, containing the logo and navigation links. * The **sidebar** pane on the left hand side can contain product categories or filters. * The **content** section on the right, contains a list of products. ## Simple Animation API In the above codepen, you may find that you only need to import one component, `motion` from the library (for the time being, I don’t care about `AnimatePresence`), no matter what HTML tag you are using , simply prefixing `motion.` before the tag name can start animating that tag, for example `motion.div`, `motion.span` or `motion.li`. Creating animation is as simple as declaring an object containing the animations you want in the `animate` property or for operations like `tap` use the `whileTap` attribute, and the focus will use `whileFocus`. As in the above codepen, for the logo, when I hover the mouse over, you can see **logo enlarges** a bit, thanks to the animation declaration `scale` as follows: “`jsx // line 12 “` Similarly, if you want the logo to shift **to the right 10px** on hover, just change `scale: 1.2` to `x:10`: “`jsx “` Or combine multiple animations at once: “`jsx “` Simple yet? ? You guys just fork the pen back and play with it. > *Read more:* > * https://www.framer.com/docs/animation/#simple-animations > * https://www.framer.com/docs/gestures/ ## Smart Variants `Variants` is another property of the motion component that allows us to group multiple animations together (into ~~variants~~/states). For example a button can have many states such as: default, hover, active, focus; or a dialog has 2 states like: close, open. Each state will have different animations declared and `variants` makes it easy to manage them, when you need to `animate` just point to that state. As in the above codepen, I set 2 states *collapse* and *expand* for the sidebar frame. When clicking the arrow button, it will collapse / expand the corresponding sidebar and based on that state to animate: “`jsx // line 35 const listVariants = { collapse: { width: 0 }, expand: { transition: { staggerChildren: 0.2 } } }; // line 57 … “` In addition, `variants` also allows us to **propagate** (animate child components based on parent’s state) and **orchestrate** (control their timing, delay from parent component) . As in the codepen: “`jsx // line 42 const itemVariants = { collapse: { opacity: 0 }, expand: { opacity: 1 } }; // line 62 “` The `li`s only need to declare `variants` corresponding to the state of the parent `ul`, they will be automatically animated by the parent propagation. And if you notice, in the `listVariants` of `ul` parent, I have used an attribute called `staggerChildren`, this property allows to delay the animation of each child component by a certain amount of time, for example in this is 0.2s, then the 1st child component will delay 0s, the 2nd child component will delay 0.2s, the 3rd child component will delay 0.4s… and so on (orchestration). > *Read more:* > * https://www.framer.com/docs/animation/#variants > * https://www.framer.com/docs/transition/#orchestration ## Unmount and layout animation One of Here are the ***magic*** possibilities of Framer Motion. In the codepen, the unmount feature and part of the layout animation are shown in the navigation links. You can see, when clicking on a navigation link, this link is “double” blue, then select another link, then the blue box is “moved” to that new link. That’s by manipulating the motion component’s `layoutId` property and a component called `AnimatePresence`: “`jsx // line 15 setActiveElem(i)}> {activeElem === i && ( )} “` The logic I handle here is, each `a` tag (navigation link) will nest a `span` tag (blue highlighter), when clicking on a link, display the highlighter of that link by mounting component, then animate `opacity` from its initial state of 0 to 1. By default, we can only animate a component when it is mounted into React’s DOM tree, to animate the component even when it is unmounted. then Framer Motion provides an `AnimatePresence` component to help us do that. Just wrap `AnimatePresence` outside the component that needs to handle the unmount animation, then declare an additional attribute `exit` for the motion component and you’re done. The `span` tags just need to declare the same `layoutId`, Framer Motion will automatically handle the layout animation as moving the highlighter from one component to another. Now you try to select a button in the sidebar, will see the magic of the layout animation is shown more clearly. These buttons I am handling as a filter button, when a button is selected, the product list on the content side will be filtered accordingly. Can you see how the product boxes on the right hand side fly and jump every time we change the filter? period “magic”: “`jsx // line 82 {i} “`  > *Read more:* > * https://www.framer.com/docs /animate-presence/ > * https://www.framer.com/docs/animation/#layout-animations > * https://www.framer.com/docs/animation/#shared-layout-animations # “To Infinity and Beyond” In addition to the basic features shown through the simple examples in the above codepen, Framer Motion also has a lot of more sophisticated and advanced features, such as animations (spring, tween, inertia) ), the ability to freely customize transitions, use dynamic variants, or animate components with code thanks to animation controls… It’s all waiting for you [to discover](https://www.framer.com/docs/ )! Let’s bring life to your website, application! Let users be amazed by your creativity, imagination, give them a sense of excitement when experiencing a technical but highly artistic product. ? (But remember that “too much of anything is not good”, too much animation can backfire, making the user experience worse. Use only, don’t abuse!) Thank you for following the article —- @khangnd
[](https://github.com/khang-nd) [](https://www.linkedin.com/in/khangnd/) [ ://images.viblo.asia/20×20/3921db2e-e4e5-45d7-acc8-e8b92e02d47d.png)](https://dev.to/khangnd) [ /20×20/fad64df3-0be8-4481-b810-8995f18f71ea.png)](https://dev.fandom.com/wiki/User:KhangND)

Source : Viblo