Using Hover and Press Effects in Framer
In this Framer tutorial, you will learn Using Hover and Press Effects in Framer. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance.
How do I add a hover effect to a layer in Framer?
To add a hover effect, select your layer (such as a frame with an image fill), go to the properties panel, and scroll down to the effects section. Click to add an effect and choose ’hover’. A modal will appear where you can adjust how the layer appears when hovered, such as changing scale, offset, rotation, opacity, and transition. You can preview the effect as you adjust the settings. Once you’re satisfied, close the modal and use preview mode (Command P on Mac or Control P on PC) to see the effect in action.
What is the difference between hover and press effects in Framer?
Hover effects are triggered when the cursor moves over a layer, making them specific to desktop environments where a cursor is present. Press effects are triggered by clicking down the mouse button or pressing with a finger on mobile, so they work on both desktop and mobile. By default, hover effects might scale a layer up, while press effects typically scale it down to give the impression of being pressed in.
Can I customize the animation and transition for hover and press effects?
Yes, you can customize the animation and transition for both hover and press effects in Framer. When you apply an effect, you can adjust properties like scale, rotation (with options for 2D or 3D), offset, and opacity directly in the properties panel. For transitions, you can select a physics-based spring and tweak settings such as stiffness, damping, and mass to control how the movement feels, allowing you to create effects from a subtle wiggle to a smooth scaling and rotation.
Lesson details
