Magnetic Override for Framer
A code override that makes any element pulled toward the cursor when you get close. It springs back when you move away. It works on buttons, cards, logos, nav items, or any other frame.
How to install
In Framer, open the Assets panel and go to Code.
Click + and choose New File → Override.
Name it Magnetic and replace the contents with the code below.
Magnetic - Pastebin.com
Save the file.
How to use
Select the element on the canvas (a button, card, or logo).
In the right panel, scroll to Code Overrides.
Choose the file Magnetic and then the override withMagnetic.
Open Preview and move your cursor near the element. The effect doesn't show on the canvas, only in Preview and on the live site.
Settings
All settings are in the MAGNET object at the top of the file.
SettingDefaultWhat it doesstrength0.35How far the element follows the cursor (0 to 1). Higher moves further.radius120Distance in px from the element's edge where the pull begins.spring200 / 15 / 0.2stiffness, damping and mass. Lower damping gives a bouncier feel, and higher stiffness gives a snappier one.
Presets
Subtle: strength: 0.2, radius: 80
Playful: strength: 0.5, radius: 160, damping: 10
Snappy: stiffness: 300, damping: 20
Tips
The override moves the whole frame. To make an icon or label move more than its button, apply the override to the inner element too, with a higher strength.
Magnetic elements are easier to click if you leave some space around them, since the target moves.
It's a mouse effect, so on touch devices nothing happens and the element stays put.
