How to create section progress bar with Scrollmagic?

Create section progress bar with Scrollmagic 

add_action("wp_head", function () {

    ?>

    <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script> <!-- GSAP -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script> <!-- ScrollMagic GSAP Plugin -->

    <script>

       document.addEventListener("DOMContentLoaded", function() {

    var controller = new ScrollMagic.Controller();

    var targetElement = document.querySelector("#animate1");

    var bodyElement = document.querySelector("body");

    var triggerElement1 = document.querySelector("#trigger1"); 

    var triggerElement2 = document.querySelector("#trigger2"); 

    if (targetElement && triggerElement1 && triggerElement2) {

             var scene1 = new ScrollMagic.Scene({

            triggerElement: triggerElement1, 

            triggerHook: 0.2, 

            duration: 800 

        })

        .setClassToggle(bodyElement, 'activeOverlay') 

        .addTo(controller); 

        var scene2 = new ScrollMagic.Scene({

            triggerElement: triggerElement1, 

            triggerHook: 0.2, 

            duration: 800 

        })

        .setClassToggle(targetElement, 'activeScaleAnimation') 

        .addTo(controller); 

        var animationPlaying = false;

        triggerElement2.addEventListener("click", function() {

            if (animationPlaying) {

                scene.reverse();

                resetAnimation(targetElement); 

                animationPlaying = false; 

            }

        });

        scene.on("start", function() {

            animationPlaying = true; 

        });

        scene.on("end", function() {

            animationPlaying = false; 

            resetAnimation(targetElement); 

        });

    } else {

        console.error("Elements #animate1, #trigger1 or #trigger2 not found!");

    }

    function resetAnimation(element) {

        element.style.backgroundColor = ""; 

        element.style.transform = ""; 

    }

});

</script>

<?php

});

?>

/*---------------------CSS---------------------------*/

#animate2 {

    background: #ffe9f2 !important;

    width: 3px;

    height: 0px;

    position: absolute;

    top: -21px;

    left: 0;

    right: 0;

    margin: auto;

    z-index: 0;

}

.scrollBarSection{

    position: relative;

}