概要
スクロール量に完全同期して円形ゲージが0%から100%まで満ちていく、実績・達成度・読了率などを見せるピン留め型のアニメーション。
使用技術
・GSAP + ScrollTrigger（scrub連動 / pin）
実装ポイント
・SVG円の `stroke-dasharray` を `0,905` から `905,905`（円周=905）へトゥイーンし、線の描画長でゲージの充填を表現
・`scrub: 0` でスクロール位置に厳密追従、`pin: “.section-progress”` で250vh区間をスクロールする間ゲージ部を画面固定
・SVG自体を `transform: rotate(-90deg)` して起点を天頂（12時方向）に補正
・`onUpdate` で `self.progress * 100` を四捨五入し中央のパーセント数値を更新
・破線の内トラックは別途 `rotate: 360` を `scrub: 1` でゆっくり回し、装飾的な回転を追加
コアスニペット
const circumference = 905;
gsap.fromTo(
".progress-circle-main",
{ strokeDasharray: `0, ${circumference}` },
{
strokeDasharray: `${circumference}, ${circumference}`,
ease: "none",
scrollTrigger: {
trigger: ".progress-wrapper",
start: "top top",
end: "bottom bottom",
scrub: 0,
pin: ".section-progress",
onUpdate: (self) => {
percentage.innerText = Math.round(self.progress * 100);
},
},
}