How to achieve this text changing animation in bubble?

change text

How to develop this in a bubble either natively or using a plugin or any code?
what we call it to write a proper question on internet?
any help is appreciated.

Best,
Ehsan

Hi there, @98.ehsan.e… go to the plugin area and search for “typewriter text”. The plugin that comes up is free, and it has been installed in over 19,000 apps, so I would definitely give it a look.

Best…
Mike

Or you can create a row group with the 3 texts where the animated texts id attribute is ‘animated-text’ (you have to tic expose option to add element ids or whatever it is in general settings at the very bottom) and you can use this code in your seo settings area of your header code

<style>
#animated-text {
border-right: 2px solid #000;
white-space: nowrap;
overflow: hidden;
margin: 0 5px;
}

@keyframes typing {
from {
    width: 0;
}
to {
    width: 100%;
}
}

@keyframes blink-caret {
50% {
    border-color: transparent;
}
}
</style>

<script>
const animatedText = document.getElementById('animated-text');
const words = ['Coaching', 'Guidance', 'Support'];
let wordIndex = 0;
let charIndex = 0;

function type() {
if (charIndex < words[wordIndex].length) {
    animatedText.textContent += words[wordIndex].charAt(charIndex);
    charIndex++;
    setTimeout(type, 150);
} else {
    setTimeout(erase, 1000);
}
}

function erase() {
if (charIndex > 0) {
    animatedText.textContent = words[wordIndex].substring(0, charIndex - 1);
    charIndex--;
    setTimeout(erase, 100);
} else {
    wordIndex = (wordIndex + 1) % words.length;
    setTimeout(type, 500);
}
}

animatedText.addEventListener('animationend', () => {
animatedText.style.animation = '';
});

type();
</script>
1 Like

thank you @mikeloc and @doug.burden for quick help!

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.