GSAP Magnetic Pull Button
マウスに吸い寄せられるようにGSAPで滑らかに追従するマグネティックボタン。
HTML
<button class="gmpb" id="gmpb">Attract</button>
CSS
.gmpb {
padding: 16px 44px;
background: #1e293b;
color: #e2e8f0;
border: 1px solid #334155;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
}
JavaScript
const el = document.getElementById('gmpb');
el.addEventListener('mousemove', function(e) {
const rect = el.getBoundingClientRect();
const x = e.clientX - rect.left - rect.width / 2;
const y = e.clientY - rect.top - rect.height / 2;
gsap.to(el, { x: x * 0.3, y: y * 0.3, duration: 0.4, ease: 'power2.out' });
});
el.addEventListener('mouseleave', function() {
gsap.to(el, { x: 0, y: 0, duration: 0.6, ease: 'elastic.out(1, 0.4)' });
});