Articles on: Custom extensions

Fading text animation

Learn how to create a gorgeous fading text animation with just a few copy/pastes.



Step 1/5


Copy the following code:


<script>
(function() {
var a = setInterval( function() {
if ( typeof window.jQuery === 'undefined' ) {
return;
}
clearInterval( a );

(function(){
var words = [
'Founders',
'Makers',
'Hackers',
'Marketers',
], i = 0;
setInterval(function(){
$('#changingword').fadeOut(function(){
$(this).html(words[i=(i+1)%words.length]).fadeIn();
});
}, 3000);

})();

}, 500 );
})();
</script>
<style>
#changingword {
font-family: inherit !important;
}
</style>


Step 2/5


Paste it to your Settings -> General settings -> Global <body> HTML code:

****



Step 3/5


Replace the default set of words with your own ones (make sure to keep the quotes!):



You can add or remove any number of words. For example, this is how this code will look with 2 words:



Step 4/5


Copy this code and paste it into the headline's text field (at the very end):


<span id="changingword">Founders</span>




Replace "Founders" with your own word. It will be the first word in the animation.



Step 5/5


Write text that will be placed before the animated part:




Done!


Save changes and open the live version of the page to see the results 🚀

Updated on: 20/04/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!