Kevin Powell - CommunityKP-C
Kevin Powell - Community•13mo ago•
7 replies
NeilVanGotham

Animate to just the initals of a name

Hello, I have been trying to have an animation where a name is reduced to just the initials.
I have tried setting keyframes from width: auto to width: 1ch (with interpolate-size: allow-keywords; set), but 1ch is too small to have the letter fully visible. Then I have tried setting the letter spacing to 0.2ch, and have the width animate to 1.2ch, but not every inital has the same width then. 

---
const { title } = Astro.props;
const titleParts = title.split(" ");
---

<title-element data-message="{message}">
  <section class="title-wrapper">
    <h1>
      {titleParts.map((part: string) => <span>{part} </span>)}
    </h1>
  </section>
</title-element>

<style lang="scss">
  section {
    height: 60vmin;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  h1 {
    white-space: nowrap;
    font-size: clamp(4em, 11vmin, 6em);
    // color: transparent;
    background: linear-gradient(
      rgb($accent-bright) 53%,
      rgb($accent-bright-variant) 55%
    );
    background-clip: text;

    & span {
      letter-spacing: 0.2ch;
      contain: paint;
      text-align: center;
      display: inline-block;
      animation: shorten 5s ease forwards;
    }
  }

  @keyframes shorten {
    from {
      width: auto;
    }

    to {
      width: 1.2ch;
    }
  }
</style>
Was this page helpful?