How to Create a Heading Animation in Shopify Inspired by Hims

Step 2: Add the code

<style>
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
  .section-container {
    height: 500px;
    width: 100vw;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
  }
  .container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    background: {{ section.settings.background }};
  }
  .subcontainer {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
  }
  .subcontainer-first {
    position: relative;
  }
  .subcontainer-second {
    display: flex!important;
    justify-content: center;
    align-items: center;
  }
  .wrapper {
    max-width: 100%;
    max-height: 100%;
    font-size: 8rem;
    padding-top: 3rem;
    padding-left: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .wrapper > p {
    font-size: 2rem;
  }
  .wrapper .text {
    display: inline-block;
    vertical-align: middle;
    margin-top: 8rem;
    line-height: normal;
  }
  .wrapper .change {
    height: 37px;
    width: 90px;
    overflow: hidden;
  }
  .wrapper span {
    position: absolute;
    display: block;
    opacity: 0;
    height: 37px;
    animation: change 10s linear infinite 0s;
    text-wrap: nowrap;
  }
  .wrapper span:nth-child(2) {
    animation-delay: 2.5s;
  }
  .wrapper span:nth-child(3) {
    animation-delay: 5s;
  }
  .wrapper span:nth-child(4) {
    animation-delay: 7.5s;
  }
  @keyframes change {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 0;
      transform: translateY(20px);
    }
    10% {
      opacity: 1;
      transform: translateY(0px);
    }
    25% {
      opacity: 1;
      transform: translateY(0px);
    }
    30% {
      opacity: 0;
      transform: translateY(-20px);
    }
    80% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  
  @media only screen and (max-width: 1096px) {
    .wrapper {
      font-size: 6rem;
    }
  }
  
  @media only screen and (max-width: 500px) {
    .container {
      flex-direction: column;
    }
    .wrapper {
      font-size: 4rem;
    }
    .wrapper .text {
      margin-top: 3rem;
    }
  }
  @media only screen and (min-width: 1660px) {
    .wrapper {
      left: 6rem;
    }
  }
  .subcontainer-second img {
    max-width: 100%;
    height: auto;
    {% if section.settings.img-size > 0 %}
    width: {{ section.settings.img-size }}rem;
    {% endif %}
  }
</style>

<div class="container">
  <div class="subcontainer subcontainer-first">
    <div class="wrapper">
      <div class="change">
        {% for block in section.blocks %}
          {% if block.type == 'animated-text' %}
            <span style="color: {{ block.settings.color }}">{{ block.settings.text }}</span>
          {% endif %}
        {% endfor %}
      </div>
      <div class="text">{{ section.settings.heading-1}}</div>
      <p>{{ section.settings.text-1 }}</p>
    </div>
  </div>
  <div class="subcontainer subcontainer-second">
    <img src="{{ section.settings.image | image_url }}" />
  </div>
</div>

{% schema %}
  {
    "name": "Animated Heading",
    "class": "section-container",
    "blocks": [
      {
        "name": "Animated Text",
        "type": "animated-text",
        "limit": 4,
        "settings": [
          {
            "type": "color",
            "id": "color",
            "label": "Color",
            "default": "#000"
          },
          {
            "type": "text",
            "id": "text",
            "label": "Text",
            "default": "Default Text"
          }
        ]
      }
    ],
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "text",
        "id": "heading-1",
        "label": "Heading Text",
        "default": "Default Heading"
      },
      {
        "type": "text",
        "id": "text-1",
        "label": "Sub Text",
        "default": "Default Text Here"
      },
      {
        "type": "range",
        "min": 0,
        "max": 100,
        "step": 5,
        "default": 0,
        "label": "Image Size",
        "id": "img-size"
      },
      {
        "type": "color",
        "id": "background",
        "label": "Background Color",
        "default": "#fff"
      }
    ],
    "presets": [
      {
        "name": "Animated Heading"
      }
    ]
  }
{% endschema %}

Step 3: Customize Your Section

1. Add Animated Text: In the Shopify admin, go to the "Customize" section of your theme. You can now add blocks of animated text to your new section.
2. Set Background and Text Colors: Customize the background color and text colors to match your brand's aesthetic.
3. Upload an Image: If desired, upload an image that complements your heading animation.