GSAP マグネティックボタン
このスニペットは、カーソルが近づくとボタンが吸い付くように動く「マグネティックボタン」を GSAP で実装したものです。 mousemove でボタン中心とカーソルの距離を計算し、その差分の 0.4 倍だけ x ・ y をずらして追従させます。
解説
このスニペットは、カーソルが近づくとボタンが吸い付くように動く「マグネティックボタン」を GSAP で実装したものです。mousemove でボタン中心とカーソルの距離を計算し、その差分の 0.4 倍だけ x・y をずらして追従させます。倍率を 1 未満にしているため、カーソルにぴったり一致せず少し遅れて引き寄せられる重みのある動きになります。マウスが離れると mouseleave で elastic.out イージングを使い、ぷるんと弾みながら元の位置へ戻ります。
向いている場面
- 申し込みや問い合わせなど、最も押してほしい主要 CTA
- ヒーロー内の存在感を出したい単一のボタン
- ポートフォリオやブランドサイトの遊び心あるアクセント
吸い付く強さは差分にかける倍率（ここでは 0.4）で調整でき、値を上げるほど大きく動きます。戻りの跳ね具合は elastic.out(1,0.4) の数値で変えられます。注意点として、この効果はマウスを前提としており、タッチ端末では追従しないため通常のタップとして成立させておく必要があります。多用すると画面がうるさくなるので、1 画面に 1 つ程度に留め、動きを嫌う利用者向けに prefers-reduced-motion で無効化する配慮も入れてください。
使用例・適したシーン
- ナビゲーションのインタラクティブ装飾
- ギャラリーのホバーリビール
- サービスカードの強調
よくある質問
吸い付く強さを調整するには
mousemove 内で差分に掛けている係数を変えます。0.4 を大きくするとカーソルに強く追従し、小さくすると控えめになります。ボタンのサイズや好みに合わせて 0.2 から 0.5 の範囲で試すとよいです。
スマートフォンでも動きますか
この効果はマウスの動きを使うため、タッチ操作のスマホでは追従しません。ただし通常のボタンとしてタップは機能するので、モバイルでは静的なボタンとして問題なく使えます。