How to create bubble scale animation with Scrollmagic?

 Create bubble scale animation 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 scene = new ScrollMagic.Scene({

triggerElement: "#bubbleTrigger1"

})

                        .setClassToggle(".bubbleAnimate", "activebubble") 

                        .addTo(controller);

});

</script>

<?php

});

?>

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

.bubbleAnimate {

    position: relative;

    overflow: hidden !important;

}

.bubbleAnimate::after {

    width: 30px;

    height: 30px;

    z-index: -2;

    content: "";

    background: #FFF5F9;

    position: absolute;

    top: -15px;

    left: 0;

    right: 0;

    border-radius: 200%;

    margin: auto;

    transition: 0.9s all;

}

.activebubble::after{

    transform: scale(100);

}