How to create section Showcase/Scale animation in viewport with Scrollmagic?

Section Showcase/Scale animation in viewport 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("#animate2");

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

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

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

if (targetElement && triggerElement1 && triggerElement2) {

    var screenWidth = screen.width;

    var screenHeight = screen.height;

    console.log("Screen resolution: " + screenWidth + "x" + screenHeight);

   var scene2 = new ScrollMagic.Scene({

      triggerElement: "#trigger3",   

      triggerHook: 0.5,                

      duration: screenHeight,                 

    })

    .on("progress", function(e) {

      var progressHeight = e.progress * screenHeight; 

      targetElement.style.height = progressHeight + "px"; 

    })

    .setTween(

      gsap.to(targetElement, {

        backgroundColor: "green", 

        ease: "power1.out", 

      })

    )

    .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---------------------------*/

.home {

    position: relative;

 }

 body::after {

     background: #fff5f9c9;

     width: 100%;

     height: 100%;

     content: "";

     position: fixed;

     top: 0;

     bottom: 0;

     left: 0;

     right: 0;

     z-index: 9999;

     transition: 0.5s all;

     opacity: 0;

     pointer-events: none;

 }

 .activeOverlay::after{

     opacity: 1;

     pointer-events: unset;

 }

 #animate1{

     transition: 0.5s all;

     z-index: 999999; 

 }

 .activeScaleAnimation {

     transition: 0.5s all;

     transform: scale(1.2);

 }