概要
スクロールの速度を物理的な揺れ・伸縮・歪み・傾きに変換し、素材感のある4種のリアクションを見せる、インタラクション表現のショーケース。
使用技術
・GSAP + ScrollTrigger（スクロール速度の取得）
実装ポイント
・`ScrollTrigger` の `onEnter` で `self.getVelocity()` を取得し、上下限 ±4000 にクランプしてから各エフェクトの強度へ換算
・SWINGは吊り下げ点を `transform-origin: center -120px` に置き、速度から求めた角度で `rotate` させ `elastic.out(1, 0.2)` で自然減衰
・ELASTICは `scaleY` を伸ばし `scaleX` を縮めて体積保存風のバウンド、バネSVGも同時に `scaleY` 変形
・SKEWは `skewX` と `scaleY` で柔らかい歪み、3D TILTは `perspective` 下で `rotateX` を効かせ奥へ倒れる回転を表現
・いずれも `gsap.fromTo` の始点に速度由来の値、終点に基準値を置き `overwrite: true` で連続発火の競合を回避
コアスニペット
let velocity = self.getVelocity();
if (velocity > 4000) velocity = 4000;
if (velocity < -4000) velocity = -4000;
// SWING: 速度を角度に換算し、揺れてから減衰
let amplitude = velocity / 80;
amplitude = gsap.utils.clamp(-60, 60, amplitude);
gsap.fromTo(
hanger,
{ rotate: -amplitude },
{ rotate: 0, duration: 2.5, ease: "elastic.out(1, 0.2)", overwrite: true }
);