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:

(function() {
    var a = setInterval( function() {
        if ( typeof window.jQuery === 'undefined' ) {
        clearInterval( a );

      var words = [
          ], i = 0;
      }, 3000);

    }, 500 );
#changingword {
font-family: inherit !important;

Step 2/5

Paste it to your General settings > </body> custom 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:


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

Updated on: 18/12/2023

Was this article helpful?

Share your feedback


Thank you!