Component
Hover Force Component for Framer
This is a recreation of the hover force effect for Framer, from Marcos Silva’s work. It adds a responsive push or pull behavior to any element, reacting to your cursor with smooth, customizable motion.
About the resource
To use the hover force component, just connect it to any element in your Framer project. You can control how close the cursor needs to be for the effect to kick in using the area setting, and tweak how far the element moves with the movement slider. Choose between two modes—attract or repel—depending on whether you want the element to follow or avoid the cursor. You can also limit movement to vertical, horizontal, or let it move freely in all directions. Smoothing lets you decide how fluid the motion feels, and you can toggle the effect on or off anytime.
About the resource
To use the hover force component, just connect it to any element in your Framer project. You can control how close the cursor needs to be for the effect to kick in using the area setting, and tweak how far the element moves with the movement slider. Choose between two modes—attract or repel—depending on whether you want the element to follow or avoid the cursor. You can also limit movement to vertical, horizontal, or let it move freely in all directions. Smoothing lets you decide how fluid the motion feels, and you can toggle the effect on or off anytime.
About the resource
To use the hover force component, just connect it to any element in your Framer project. You can control how close the cursor needs to be for the effect to kick in using the area setting, and tweak how far the element moves with the movement slider. Choose between two modes—attract or repel—depending on whether you want the element to follow or avoid the cursor. You can also limit movement to vertical, horizontal, or let it move freely in all directions. Smoothing lets you decide how fluid the motion feels, and you can toggle the effect on or off anytime.
The hover force component properties in Framer.
The hover force component properties in Framer.
The hover force component properties in Framer.
