GSAP Magnetic Button Hover Effect
Overview
A magnetic button built with GSAP quickTo: the pill leans toward the cursor as it gets close, the label trails a beat behind, and an oval fill rises from below on hover.
Drop it in anywhere you would use a button: hero CTAs, nav actions, contact links. The pull only starts inside a radius around the button, so a row of them never fights over the cursor.
Details
- Category
- Buttons
- Interaction
- Mouse Move + On Hover
- Trigger
- Mouse Move
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 8 componentsBuilt with the same techniques
(02)FAQ
GSAP Magnetic Button Hover Effect — FAQ
01How strong is the magnetic pull?
Set strength from 0 to 1. 0.35 is a gentle lean; 0.6 feels playful. radius controls how far away the pull starts.
02Does it work on mobile?
On touch screens there is no cursor to follow, so it renders as a regular button with the same fill animation on tap.
03Can I use it as a link?
It renders a <button>. Wrap it in your router's Link, or swap the element for <a> in the file; the animation code doesn't care which.