ボタン
GSAP

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)' });
});