Adding revolving text for homepage headline

Site URL: https://www.thecoactive.space/

Hi,

I'd like to add a headline to my homepage “CONQUER YOURSELF" and have the word YOURSELF revolve through other words (FEARS, DOUBTS, LIMITS). Is there a way to do this on Squarespace?

Similar to the example portrayed here: https://images.app.goo.gl/raeGvfx5uL1ydLSd8

Thank you in advance to anyone who can help!!

Create a code block and save it.

Get the block id for the code block. You can use Heather Tovey's most excellent looking Squarespace ID Finder.

Edit the code block and add the following replacing [enter block id here] with the block id.

<!--

  begin code block text swap
  
  Version         : 0.1d0
  
  SS Versions     : 7.1, 7.0
  
  v7.0 Templates  : all
  
  Note            : the code is comprised of several tags. all are needed for
                    the full effect to work
  
  By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    @keyframes swap {
    
      0% {
      
        content : var( --text );
        
        }
        
      25% {
      
        content : 'fears';
        
        }
        
      50% {
      
        content : 'doubts';
        
        }
        
      75% {
      
        content : 'limits';
        
        }
        
      }
      
    [enter block id here] {
    
      --duration : 4s;
      --word-count : 4;
      --text : 'yourself';
      
      }
      
    [enter block id here] p {
    
      /* enter property value pairs to style text here */
      
      text-transform : uppercase;
      
      }
      
    [enter block id here] p span {
    
      /* enter property value pairs to style swap text here */
      
      }
      
    [enter block id here] .sqs-block-content span::after {
    
      animation : swap calc( var( --duration ) * var( --word-count ) ) linear
                  infinite;
                  
      content : var( --text );
      
      }
      
    </style>
    
  <p>
  
    <!-- enter text here -->
    
    conquer
    
    <span>
    
      <!-- leave this empty -->
      
      </span>. <!-- need ending puncuation? put it right after the </span> -->
      
    </p>
    
  <!-- end code block text swap -->

Let us know how it goes.

1 hour ago, creedon said:

Create a code block and save it.

Get the block id for the code block. You can use Heather Tovey's most excellent looking Squarespace ID Finder.

Edit the code block and add the following replacing [enter block id here] with the block id.

<!--

  begin code block text swap
  
  Version         : 0.1d0
  
  SS Versions     : 7.1, 7.0
  
  v7.0 Templates  : all
  
  Note            : the code is comprised of several tags. all are needed for
                    the full effect to work
  
  By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    @keyframes swap {
    
      0% {
      
        content : var( --text );
        
        }
        
      25% {
      
        content : 'fears';
        
        }
        
      50% {
      
        content : 'doubts';
        
        }
        
      75% {
      
        content : 'limits';
        
        }
        
      }
      
    [enter block id here] {
    
      --duration : 4s;
      --word-count : 4;
      --text : 'yourself';
      
      }
      
    [enter block id here] p {
    
      /* enter property value pairs to style text here */
      
      text-transform : uppercase;
      
      }
      
    [enter block id here] p span {
    
      /* enter property value pairs to style swap text here */
      
      }
      
    [enter block id here] .sqs-block-content span::after {
    
      animation : swap calc( var( --duration ) * var( --word-count ) ) linear
                  infinite;
                  
      content : var( --text );
      
      }
      
    </style>
    
  <p>
  
    <!-- enter text here -->
    
    conquer
    
    <span>
    
      <!-- leave this empty -->
      
      </span>. <!-- need ending puncuation? put it right after the </span> -->
      
    </p>
    
  <!-- end code block text swap -->

Let us know how it goes.

Sorry, this is the first time I'm trying something like this. I've managed to find the block id (thank you!) and swapped it in, but don't understand what property value pairs are. What should I be entering there?

No worries. The property/value pairs I mentioned are CCS property/value pairs. For example text-transform : uppercase; is one.

You are probably going to want to start with font-size and font-weight.

5 hours ago, creedon said:

No worries. The property/value pairs I mentioned are CCS property/value pairs. For example text-transform : uppercase; is one.

You are probably going to want to start with font-size and font-weight.

Got it, thanks! I'll try it out 🙏