Create Micro Interactions with Framer Motion Gesture Props

Will Johnson
InstructorWill Johnson
Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated 2 years ago

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

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.

egghead
egghead
~ 18 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today