Trig Article Progress

HTML

<html>
    <head>
        <title>Trig.js Example - Article Progress Bar</title>
        
        <!-- Trig JS -->
        <script src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js"></script>

        <!-- Google Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono&display=swap" rel="stylesheet">
        <!--End Fonts -->

        <!-- Mobile viewport meta tag -->
        <meta name="viewport" content="width=device-width, initial-scale=1" />

    </head>
    <body>
        <div class="pageContainer">
            
            
            <div class="container">
                
                <h1 id="title" class="alignCenter" data-trig-max="200" data-trig data-trig-var="true">New article</h1>
                
            </div>
            
            <div class="container" id="article" data-trig-min="0" data-trig-global="true" data-trig-var="true" data-trig>
                
                
                <div>
                    
                    
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan viverra pellentesque. Praesent nulla orci, laoreet eu tempus at, gravida ut lectus. Fusce vitae luctus lorem. In convallis condimentum nunc nec pulvinar. Vestibulum eu augue et nisi malesuada volutpat non quis dolor. Donec eget ipsum lobortis, fringilla nisi at, sagittis justo. Nunc consequat leo at nulla suscipit ornare.</p>
                    
                    <p>Etiam ornare iaculis dolor, ut efficitur eros consequat non. Phasellus non malesuada elit, a tincidunt metus. Morbi sagittis vel massa non faucibus. Quisque in arcu feugiat, malesuada ipsum non, dignissim erat. Proin dictum viverra tellus, a sagittis metus blandit in. Ut lobortis cursus odio ac finibus. Praesent eu leo vulputate, vestibulum leo ac, blandit...

CSS

body{
                margin:0px;
                padding:0px;
                background-color:#060606;
                color:#FFF;
                font-family: 'Space Mono', monospace;
            }
            .pageContainer{
                max-width:100%;
                width:100%;
                overflow:hidden;
            }
            .container{
                width:80vw;
                min-height:100vh;
                position:relative;
                margin:auto;
                display:flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
            }
            h1{
                font-family: 'Bebas Neue', cursive;
                color: #FFF;
                text-shadow: 2px 2px 2px #000000;
                font-size:72px;
            }
            #article{
                position:relative;
                height:auto;
                display:block;
            }
            .progress{
                position: fixed;
                background-color: #FFF;
                width: 100%;
                height: 40px;
                left: 0;
                top: 0;
            }
            .progressBar{
                background-color: #F1F1F1;
                margin: 15px;
                width: calc(100% - 30px);
                height: 10px;
            }
            .progressBar:after{
                content:"";
                height:10px;
                width:var(--trig-article);
                background-color:#1b8237;
                display: block;
                transition:width ease-out 0.3s;
            }
            #title{
                perspective-origin: 25% 75%;
                transform-style: preserve-3d;
                transform: translateY(var(--trig));
                transition: transform ease-out 0.3s;
            }