Lesson 8/9

Adding interactivity: Hover, focus and tap

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.

Unlock the full lesson with PRO

Want to read the full lesson? Join Frontend.FYI PRO.

PRO is a one time purchase of €149 that gives you lifetime access to this course, any courses released in the future, and so much more!