gsap-08진행바 효과(feat. scrollTrigger)

gsap을 이용하여 간단하게 진행바를 구현해보자

 <div class="parallax__progress">
	<progress max="100" value="10"></progress>
 </div>

/* optiopm */
        .parallax__progress progress {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10000;
            width: 100%;
            height: 5px;
            border: none;
            background: transparent;
        }
        progress::-webkit-progress-bar {
            background: transparent;
        }
        progress::-webkit-progress-value {
            background: linear-gradient(to left, #db38b5,#01b3e3,#25ce7b,#fdc741,#ff6b01,#fc4236);
            background-attachment: fixed;
        }
        progress::-moz-progress-value {
            background: linear-gradient(to left, #db38b5,#01b3e3,#25ce7b,#fdc741,#ff6b01,#fc4236);
            background-attachment: fixed;
        }

        gsap.to("progress", {
            value: 100,
            ease: "none",
            scrollTrigger: {scrub: 0.3}
        });