概要
カードが巨大な円の弧に沿って並び、途切れなく無限に流れ続ける、ギャラリーやビジュアル訴求向けのスライダー。
使用技術
・GSAP + Draggable（慣性付きドラッグ）
・CSS 2D Transform（transform-origin による回転）
実装ポイント
・`transform-origin: 50% 1500px` で画面外の遠い一点を回転軸にし、カードを緩やかな円弧上に配置
・無限ループの肝は `gsap.utils.wrap(0, totalAngle)` で、各カードの角度を一定範囲に折り返し、端まで流れたカードを反対側から再登場させる
・`gsap.ticker` で毎フレーム `rotationValue` を更新。中心からの角度差に応じて `opacity` を落とし、端をフェードアウト
・Draggableは `inertia: true` で慣性スクロールを有効化し、`onDrag` と `onThrowUpdate` の両方で `deltaX` を回転量へ反映
コアスニペット
const totalAngle = cards.length * spacing;
// これが無限ループの肝
const wrap = gsap.utils.wrap(0, totalAngle);
gsap.ticker.add(() => {
if (!isDragging) rotationValue -= speed;
cards.forEach((card, i) => {
const rawAngle = i * spacing + rotationValue;
const wrappedAngle = wrap(rawAngle);
const finalAngle = wrappedAngle - totalAngle / 2;
gsap.set(card, { rotation: finalAngle });
});
});