NeilVanGotham Posts - Answer Overflow

NeilVanGotham

•Created by NeilVanGotham on 12/26/2024 in #front-end

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>

---
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>

8 replies

KPCKevin Powell - Community

•Created by NeilVanGotham on 7/17/2023 in #front-end

Trigger animation immediately with Flackr's Scroll Timeline Polyfill

2 replies

Gaming

Programming