Install Framer Motion and Create a Motion Component

Control Animations with Framer Motion's Animate Prop

Animate through Multiple States with Framer Motion Keyframes

Use Framer Motion initial Prop to Define the Beginning State of Animations

Customize Animations with the Transition Prop using Framer Motion

Clean Up Your Components with Framer Motion Variants

Animate Elements Removed from the DOM with Framer Motion Animate Presence 

Animate Elements When Their Layout Changes with Framer Motion layoutId

Create Dynamic Animation Values with Framer Motion for Different Elements with Custom

Create Micro Interactions with Framer Motion Gesture Props

Animate SVG Paths with Framer Motion

Drag and Animate List Reorders with Reorder Components

Animate React Apps with Framer Motion

Framer Motion provides helper props like `whileHover` & `whileTap`, that will temporarily animate a component to a visual state when that gesture is happening.



https://app.egghead.io/api/v1/lessons/react-create-micro-interactions-with-framer-motion-gesture-props/subtitles

Instructor: [0:00] The next thing that we want to do is show our users that this application is interactive. Right now, if you hover over the items, click on the items, nothing really happens. It's flat. It's static. It's good to have little micro interactions.

[0:18] Just let the user know that you can interact with these items. Framer Motion makes that really easy with gesture helper props. On our list component, we will add the while hover prop. Pass it in an object. This is just like the anime prop. We'll say, scale 1.05.

[0:47] As we save, refresh the page. When we hover over our items, they slightly scale up just a little bit just to let the user know that this is interactable or that you're hovering over this one. It's a lot more visually appealing. Let's add one more. Let's add, while tap.

[1:15] We'll set this one to an object of scale, let's say 1.1. Let's save that. Refresh the page. When we hover, it scales. When we click it, it gets a little bit bigger. This again, just let our user know that it is interactable.

[1:38] To recap, what we did is we added the while hover gesture prop, made it scale 1.05, added the while tap gesture prop, and made it scale to 1.1.

[1:53] These helper gesture props automatically know that you just want to temporarily animate these to a different visual state during these gesture actions like hovering or tapping.

Create Micro Interactions with Framer Motion Gesture Props

Share this video with your friends

Course

Animate React Apps with Framer Motion