Just like with CSS transitions, you can also animate states like hover and focus in Framer Motion.

Why define this in JS?

The main reason is that you can define the animation in the same place as the rest of your animation logic. This makes it easier to keep track of all the animations in your project. On top of that Framer adds a little bit of extra logic to make sure that the hover animations only fire when using a mouse and not when using a touch device. The focus animations behave similar to the CSS focus-visible pseudo-class – only showing when it receives focus from a keyboard.