card background pattern
Level 2

Animating React with Framer Motion

Unlock Full Course

$49.99 $39.99

Or

$24.99/Month

Gestures

We will now take a look at a couple of gesture-based animations. With Framer Motion, adding animations on hover and tap is fun and easy.

Downloads

Comments

Dan
3 months ago

If you get rid of using CSS variables, everything works. I think that is where the issues is coming from... not sure why though. This makes me think using styled component themes will probably be an issue too.

JP
updated 3 months ago

Adding the whileTap={{ background: "var(--red)" }} is throwing an error for me. getting:

Unhandled Rejection (TypeError): input.match is not a function

This is with framer-motion v1.10.3

dave.js
3 months ago

@Peder since whileTap is only active when the element is active, it goes back to its original state when it's no longer being tapped. If you want styles to persist in any state, my approach would be to keep track of state in React, as shown with the menu example from previous videos. Hope this helps!

dave.js
3 months ago

@mike in NOLA Not sure exactly what the error is. Perhaps you could post it? Either way, this should help you work around your issue in the meantime:

{{ background: "var(--red)" as any }}
Peder
4 months ago

I made a button change color to yellow with whileTap. However, when I release it, it changes the color to white, or perhaps removes the color completely. Clicking it again changes the color back to yellow while clicked. Is there anyway to solve this issue?

(It may be worth noting that I am also using Bootstrap, so the original primary blue color is given by the className='btn btn-primary'. I know this likely makes no difference, but just figured I should mention it!)

mike in NOLA
updated 4 months ago

Doing this in Typescirpt. Getting a run-time error but unliked regular js, it does not work.

whileTap= {{ background: "var(--red)" }}

this works whileTap= {{ background: "red" }}

Something to say?

Become a Pro