【GSAP】スクロールと連動するプログレスバーを実装する方法

当ブログでは記事詳細ページで最上部にスクロールと連動するプログレスバーを導入していますが、GSAPを使用して簡単に実装できたのでその方法をご紹介。
と言ってもGSAPのScrollTrigger Demosで掲載されていたコードをほとんど拝借しただけなのですが。

本体とプラグインの読み込み

HTML

CSS


.scroll-indicator {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    height: .8rem;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

.scroll-indicator::-webkit-progress-bar {
	background: transparent;
}

.scroll-indicator::-webkit-progress-value {
	background-image: linear-gradient(to bottom right, #c7bce6 0%, #c8bce6 8.1%, #c9bbe5 15.5%, #cbbbe5 22.5%, #cebae3 29%, #d2b9e2 35.3%, #d5b8e0 41.2%, #d9b7de 47.1%, #ddb6dc 52.9%, #e0b5d9 58.8%, #e3b4d6 64.7%, #e6b3d4 71%, #e8b3d1 77.5%, #eab2d0 84.5%, #ebb2ce 91.9%, #ebb2ce 100%);
	background-attachment: fixed;
	border-radius: 0.4rem;
}

.scroll-indicator::-moz-progress-bar {
	background-image: linear-gradient(to bottom right, #c7bce6 0%, #c8bce6 8.1%, #c9bbe5 15.5%, #cbbbe5 22.5%, #cebae3 29%, #d2b9e2 35.3%, #d5b8e0 41.2%, #d9b7de 47.1%, #ddb6dc 52.9%, #e0b5d9 58.8%, #e3b4d6 64.7%, #e6b3d4 71%, #e8b3d1 77.5%, #eab2d0 84.5%, #ebb2ce 91.9%, #ebb2ce 100%);
	background-attachment: fixed;
	border-radius: 0.4rem;
}

JavaScript


gsap.registerPlugin(ScrollTrigger);
gsap.to('.scroll-indicator', {
	value: 100, // 最大値
	ease: 'none', // イージング
	scrollTrigger: {
		scrub: 0.3 // 追いつくまでの時間
	}
});

本体とプラグインの読み込み

HTML

CSS

JavaScript

参考