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);