Как создать скользящую подпись в ZeroBlock в Tilda

<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        
        const brandLogos = document.querySelectorAll("a[href^='#brand']");
        const lineShape = document.querySelector("a[href^='#line']");
        
        lineShape.classList.add('line', 'squad');
        lineShape.parentElement.classList.add('parentLine');
        
        const lineclass = document.querySelector('.line').getAttribute('class');
        const prentlineclass = document.querySelector('.parentLine').getAttribute('class');
        
        
        for (let i=0; i<brandLogos.length; i++) {
            brandLogos[i].classList.add('brand', 'squad');
            
            brandLogos[i].addEventListener('mouseover', function(event) {
                document.querySelector('.line').setAttribute('class' , lineclass+' text'+i);
                document.querySelector('.parentLine').setAttribute('class' , prentlineclass+' position'+i);
            });
        };

        
        const squads = document.querySelectorAll(".squad");
        for (let squad of squads) {
            squad.parentElement.classList.add('squad');
        };
        
    })();    
});    
</script>

<style>
.line{text-align:center}
.parentLine{ transition:all 0.6s ease-in-out}
.line::before {
    content: "First Brand";
    font-family: 'Roboto',Arial,sans-serif;
    font-weight: 400;
    position: absolute;
    color: #000;
    left: 0%;
    top: -30px;
    width: 100%;
}
.parentLine.position1{transform: translateX(100%)}
.parentLine.position2{transform: translateX(200%)}
.parentLine.position3{transform: translateX(300%)}
.line.text1::before{content: "Second Brand"}
.line.text2::before{content: "Third Brand"}
.line.text3::before{content: "Fourth Brand"}
.squad{ padding: 0 5px}

@media screen and (max-width: 640px){
.line::before{
    font-size: 12px;
}
}

</style>