Add Animated Line Between 2 Text

https://avernahomes.com.au/

Hello! 

I would like to replicate the animation these guys have under their images on the homepage where the line grows from left to right. Any idea if that is possible? 

https://violin-halibut-2csa.squarespace.com/

mmmarchitects

Thanks!

You mean this line?

and apply to this position?

Hi Tuanphan, thank you for your reply! 

I had achieved this with some code injection and CSS but it has stopped working for some reason: 

<script>
document.addEventListener("DOMContentLoaded", function () {
    var targetElement = document.querySelector(".block-yui_3_17_2_1_1699612047731_7222");
    var initialWidth = 0;

    window.addEventListener("scroll", function () {
        var distanceFromTop = targetElement.getBoundingClientRect().top;

        if (distanceFromTop < window.innerHeight && initialWidth < 100) {
            initialWidth += 1; // You can adjust the increment value
            targetElement.style.width = initialWidth + "%";
        }
    });
});
</script>

CSS

/**KPG LINE**/

#block-yui_3_17_2_1_1699612047731_7222 {

    width: 0%;

  margin-left: 0; /* Initial margin */}

Any idea what is going wrong?

Thanks

I'm almost there! I just need to make it so that the menu is completely hidden when closed. Any idea what I can try?