概要
Lenisによる滑らかな慣性スクロールを土台に、ドラッグ慣性スライダー・マグネティックUI・カスタムカーソル・3Dチルト・液体風CTAボタンなど、物理ベースのインタラクションを網羅したリッチな一枚もの。
使用技術
・GSAP + ScrollTrigger + Draggable（慣性ドラッグ）
・Lenis（`@studio-freight/lenis`）による慣性スムーススクロール
・SVGフィルター（feGaussianBlur + feColorMatrix によるGooeyエフェクト）/ FontAwesome / Google Fonts（Inter）
実装ポイント
・Lenisを `gsap.ticker` に接続し（`lenis.raf(time * 1000)`、`lagSmoothing(0)`）、スクロール駆動とGSAPのフレーム更新を一本化。`lenis.on(“scroll”, ScrollTrigger.update)` で連携
・ギャラリーは `Draggable`（`type: “x”`）でドラッグ。`onDrag` で速度を記録し、`onDragEnd` で `velocity * 20` を足した慣性位置を `minX`〜`maxX` にクランプして `power3.out` で流す独自イナーシャ
・カスタムカーソルは `gsap.quickTo` で追従。ナビは要素中心からの距離に応じて動くマグネティック効果、カードはマウス位置から `rotationX/Y` を出す3Dチルト
・CTAボタンは `HybridCTA` クラスで実装。カーソルとの距離が `triggerRadius` 内なら吸着し、離れると `elastic.out` で戻る。移動量が大きいと粒子を生成、SVGの `filter: url(“#goo-hybrid”)` で液体が分離・合体するGooey表現
・背景オーブとCTA画像は `scrub` 付きScrollTriggerでパララックス、テキストは `.reveal-text` を `top 85%` で下から出現
コアスニペット
Draggable.create("#draggable-track", {
type: "x",
onDrag: function () {
velocityTracker.velocity = this.x - velocityTracker.lastX;
velocityTracker.lastX = this.x;
},
onDragEnd: function () {
const inertiaX = this.x + velocityTracker.velocity * 20;
const minX = containerWidth - trackWidth - paddingLeft;
const clampedX = Math.max(minX, Math.min(maxX, inertiaX));
gsap.to(this.target, { x: clampedX, duration: 1.2, ease: "power3.out" });
},
});