Add A Typing Text Effect to your Hero Section

Last updated: June 24, 2025

You can create an eye-catching typing animation in Replo using a small amount of custom JavaScript and CSS. This effect is perfect for drawing attention to headlines or hero text, especially when you want to create a dynamic, high-conversion landing experience.

How It Works

To get this to work we use three main concepts:

Data Attributes to allow for JS targeting of the relevant text element
Custom CSS and a Javascript injected into the page head via Advanced Page Settings
ChatGPT (or any of LLM coding assist) to generate the relevant procedural code.

Here is the code we use in the video:

<!-- ===== Typing Effect: Replo Text Component ===== -->
<style>
  /* Ensure the text stays inline and preserves spaces */
  [data-changing-text] p {
    display: inline-block;
    white-space: pre;       /* keeps leading space in " Favorite" */
  }

  /* Blinking cursor implemented with ::after pseudo-element */
  [data-changing-text] p::after {
    content: "|";
    margin-left: 2px;
    animation: blink 1s steps(1) infinite;  /* on/off every 0.5 s */
  }
  @keyframes blink { 50% { opacity: 0; } }  /* hide at midpoint */
</style>

<script>
/* Run once the DOM is ready */
document.addEventListener("DOMContentLoaded", () => {
  const el = document.querySelector('[data-changing-text] p');

  /* ===== Text fragments ===== */
  const base   = "Meet your ";   // constant prefix
  const part1  = "New";          // already visible on load
  const part2  = " Favorite";    // typed after a pause (note leading space)
  const finale = "Only";         // final replacement

  /* ===== Timing (ms) ===== */
  const interval = 100;   // speed per keystroke (typing + deleting)
  const pause    = 1000;  // 1 s pause at each full phrase

  /* Ensure starting text is consistent */
  el.textContent = base + part1;

  /* ----- Helper: type one fragment ----- */
  const type = (text, done) => {
    let i = 0;
    const original = el.textContent;         // lock current text
    (function loop() {
      if (i < text.length) {
        el.textContent = original + text.slice(0, i + 1);
        i++;
        setTimeout(loop, interval);
      } else {
        setTimeout(done, pause);             // wait, then next step
      }
    })();
  };

  /* ----- Helper: delete N characters ----- */
  const del = (count, done) => {
    let removed = 0;
    (function loop() {
      if (removed < count) {
        el.textContent = el.textContent.slice(0, -1);
        removed++;
        setTimeout(loop, interval);
      } else {
        setTimeout(done, pause);             // wait, then next step
      }
    })();
  };

  /* Total chars to delete: "New Favorite" */
  const totalToDelete = part1.length + part2.length;

  /* ===== Sequence =====
     1. Wait 1 s (pause)
     2. Type " Favorite"
     3. Wait 1 s
     4. Delete "New Favorite"
     5. Type "Only" and stop
  */
  setTimeout(() => {
    type(part2, () => {                          // step 2
      del(totalToDelete, () => {                 // step 4
        el.textContent = base;                   // reset to "Meet your "
        type(finale, () => {});                  // step 5 (done)
      });
    });
  }, pause);  // initial 1 s wait (step 1)
});
</script>

Line 20 and 21 above is where we target the relevant node and start the execution of the typing procedure after DOM Content creation. This section might need to be tailored to your specific element/page context.

If you’d like help adjusting the phrases, timing, or applying this to other components, simply explain to ChatGPT what you want to do and it should be able to get you there. The procedural part of this JS is relatively simple.

Note that your specific typing situation will likely be different from the code above. The code above is meant to be an example of a low-code custom solution. If you implement a different set of code and it's not working on our page, we can't help you diagnose this, as assisting with custom coded solutions is outside the scope of Replo support. ChatGPT should be able to help generally, though.