スクロール連動アニメーション（LENIS + GSAP）

作成日
仕様
  • Lenis でスムーススクロール／GSAP ScrollTrigger と同期
  • 要素のリビール（fade-up）、パララックス、固定ピン＋横スクロールの組み合わせ
  • 進捗バー：ScrollTrigger.maxScroll(window) を用い、pin で増えた距離も含めて全体進捗を表示
  • アクセシビリティ：prefers-reduced-motion を尊重（必要時は Lenis を停止）
  • 数字カウンタ（#counters）：ビューポート進入時に data-from → data-to へカウントアップ
  • SVG ライン描画（#svgline）：stroke-dashoffset をスクラブしてパスを描画
  • 水平セクション構成：#pin を pin、可視幅は .horizontal、移動対象は .track（pin 巻き込み防止）

スクロール連動アニメーション DEMO

Parallax

背景の速度を変えて奥行きを表現（data-speed）。

Reveal

各カードがビューポートに入るとふわっと表示。

Pin

セクションをピン留めして、中で横スクロール演出。

Progress

ページの進行度を上部バーで可視化。

Counters

スクロールで数値がカウントアップ（#counters）。

SVG Line

スクロールに応じてパスを描画（#svgline）。

Horizontal 1
Horizontal 2
Horizontal 3
Horizontal 4
Horizontal 5
0

導入社数

0

満足度(%)

0

対応業種

スクロールでラインが描かれます

おしまい。スクロール、お疲れさまでした。