Create Micro Interactions with Framer Motion Gesture Props

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.