JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>

<main>
    <section></section>
</main>

<div id="progress"></div>

CSS

body {
    position: relative;
    background: #333;
    color: #fefefe;
    height: 5000px;
    margin: 0;
}

#progress {
    background-color: #494949;
    border-radius: 3px;
    height: calc(100% - 2rem);
    position: fixed;
    width: 6px;
    top: 1rem;
    left: 1rem;
    z-index: 100;
}

#progress::before {
    background-color: #B9903E;
    border-radius: 3px;
    position: absolute;
    content: '';
    height: var(--progress);
    inset: 0;
}

JavaScript

document.addEventListener('DOMContentLoaded', (event) => {
    gsap.registerPlugin(ScrollTrigger);

    gsap.set('#progress', {
        '--progress': '0%',
    });

    ScrollTrigger.create({
        onUpdate: (self) => {
            gsap.set('#progress', {
                '--progress': (self.progress * 100).toFixed(0) + '%',
            });
        }
    });
})