Fading text animation
Learn how to create a gorgeous fading text animation with just a few copy/pastes.
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/ezgifcom-gif-maker-3_1g8i4sh.gif)
Copy the following code:
Paste it to your General settings > </body> custom HTML code
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1kxp372.png)
Replace the default set of words with your own ones (make sure to keep the quotes!):
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_n9r6ps.png)
You can add or remove any number of words. For example, this is how this code will look with 2 words:
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_8rh5j3.png)
Copy this code and paste it into the headline's text field (at the very end):
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image1av5omi_12v87qr.png)
Replace "Founders" with your own word. It will be the first word in the animation.
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_eghuc2.png)
Write text that will be placed before the animated part:
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1w7tcn3.png)
Save changes and open the live version of the page to see the results 🚀
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/ezgifcom-gif-maker-3_1g8i4sh.gif)
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 General settings > </body> custom HTML code
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1kxp372.png)
Step 3/5
Replace the default set of words with your own ones (make sure to keep the quotes!):
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_n9r6ps.png)
You can add or remove any number of words. For example, this is how this code will look with 2 words:
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_8rh5j3.png)
Step 4/5
Copy this code and paste it into the headline's text field (at the very end):
<span id="changingword">Founders</span>
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image1av5omi_12v87qr.png)
Replace "Founders" with your own word. It will be the first word in the animation.
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_eghuc2.png)
Step 5/5
Write text that will be placed before the animated part:
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1w7tcn3.png)
Done!
Save changes and open the live version of the page to see the results 🚀
Updated on: 18/12/2023
Thank you!