Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Typewritter Effect

  • Hello. Is there a way I can create a typewritter effect using GB Pro?

  • Hi there,

    No, you will need custom CSS.

    1. Paste this block to your page:

    <!-- wp:generateblocks/element {"uniqueId":"b3b0ee7c","tagName":"div","styles":{"width":"fit-content"},"css":".gb-element-b3b0ee7c{width:fit-content}"} -->
    <div class="gb-element-b3b0ee7c"><!-- wp:generateblocks/text {"uniqueId":"788128a3","tagName":"p","styles":{"display":"inline-block","overflowX":"hidden","overflowY":"hidden","whiteSpace":"normal","borderRightWidth":"2px","borderRightStyle":"solid"},"css":".gb-text-788128a3{border-right-style:solid;border-right-width:2px;display:inline-block;overflow-x:hidden;overflow-y:hidden;white-space:normal}","className":"typing"} -->
    <p class="gb-text gb-text-788128a3 typing">Typing Effect Typing Effect Typing Effect Typing Effect Typing Effect</p>
    <!-- /wp:generateblocks/text --></div>
    <!-- /wp:generateblocks/element -->

    2. Add this CSS:

    .typing {
      animation: typing 3s steps(20, end) infinite, blink 0.75s step-end infinite;
    }
    
    /* Typing animation */
    @keyframes typing {
      from { width: 0; }
      to { width: 100%; }
    }
  • I’ll give that a try, thanks!

  • You are welcome   🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.