Wobble animation in text-path issue

I am trying to create an alert to broadcast via stream elements.

I want the user’s text, which is dynamic, to fit a path that draws a curve. Said text, I want it to have the wobble animation. If the text is drawn normally, the animation works perfectly. On the other hand, when going through a path, it does not play or does so as if it were an entire block of text and not the letters independently.

HTML

<div class="text-container">
    <div class="awsome-text-container">
        <svg width="100%" height="100%" viewBox="0 0 200 400" preserveAspectRatio="xMidYMid meet">
            <path id="curve" d="M -35,50 L-35,325 Q-35,375 65,375 L175,375" fill="transparent" stroke="black" stroke-width="2"/>
            <text font-size="85px">
                <textPath id="username-container" href="#curve"></textPath>
            </text>
        </svg>
    </div>
    <p>{{message}}</p>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Caprasimo');

* {
    font-family: 'Caprasimo', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.awsome-text-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: 100%;
    height: 400px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.animated-letter {
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    opacity: 1;
    display: inline-block;
}

.text-container {
    font-size: 16px;
    color: black;
    text-align: center;
    margin: auto;
}

@keyframes wobble {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    15% {
        transform: translateX(-2px) rotate(-2deg);
    }
    30% {
        transform: translateX(2px) rotate(2deg);
    }
    45% {
        transform: translateX(-1.5px) rotate(-1.5deg);
    }
    60% {
        transform: translateX(1.5px) rotate(1.5deg);
    }
    75% {
        transform: translateX(-1px) rotate(-1deg);
    }
    90% {
        transform: translateX(1px) rotate(1deg);
    }
    100% {
        transform: translateX(0) rotate(0deg);
    }
}

JS

function stringToAnimatedHTML(s, anim) {
    const stringAsArray = s.split('');
    const animationDuration = '1.5s';

    const animatedLetters = stringAsArray.map((letter, index) => {
        const randomDelay = Math.random() * 1;
        const transformValues = `translateX(${Math.random() * 2 - 1}px)`;
        return `<tspan class="animated-letter ${anim}" style="animation-duration: ${animationDuration}; animation-delay: ${randomDelay}s; transform: ${transformValues};">${letter}</tspan>`;
    });

    return animatedLetters.join('');
}

const name = '{{name}}';
const animation = 'wobble';
const userNameContainer = document.querySelector('#username-container');
userNameContainer.innerHTML = stringToAnimatedHTML(name, animation);