Heading 1

Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.9/typed.js"></script>

<div class="typed-container page-width animate--slide-in content-container color-{{ section.settings.color_scheme }}">
  <h1 class="typing-text"> {{ section.settings.static1 }} </h1>
  <h1 class="typedjs typing-text"> </h1>
  <h1 class="typing-text"> {{ section.settings.static2 }} </h1>
</div>

{% schema %}
  {
    "name": "Typing Text",
    "tag": "section",
    "settings": [
      {
        "type": "text",
        "id": "static1",
        "label": "Static Text"
      },
      {
        "type": "text",
        "id": "typed-1",
        "label": "Typed Word 1"
      },
      {
        "type": "text",
        "id": "typed-2",
        "label": "Typed Word 2"
      },
      {
        "type": "text",
        "id": "typed-3",
        "label": "Typed Word 3"
      },
      {
        "type": "text",
        "id": "static2",
        "label": "Static Text 2"
      },
      {
        "type": "color_scheme",
        "id": "color_scheme",
        "label": "t:sections.all.colors.label",
        "default": "background-1"
      }
    ],
    "presets": [
      { "name": "Typing Text" }
    ]
  }
{% endschema %}

<style>
  .typed-container {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    max-width: none!important;
  }
</style>

<script>
//Types strings multiple times
var typed = new Typed(".typedjs", {
  	strings:["", "{{ section.settings.typed-1 }}", "{{ section.settings.typed-2 }}", "{{ section.settings.typed-3 }}"],
    typeSpeed: 60,// typing speed
    backSpeed: 60, // erasing speed
    loop: true, // start back after ending typing
    showCursor: false,
});
</script>