Kevin Powell - Community•2w ago

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>

7 Replies

yeah.right•2w ago

Why not set up separate CSS for each group? Who says all the words need the exact same CSS? Consider using CSS custom properties that help even out the variable dimensions of the content segments.

clevermissfox•2w ago

Will depend on the font you're using, a monospace font could help. This sounds like a great use case for gsap imo

NeilVanGothamOP•2w ago

I have found another solution. I now have another span element with the first letter of that part in, and I cramp the full text and the first letter in the same container, and animate the full text to width: 0; : It doesn't look perfect yet, I still need to fiddle with the end width, and the alignment of the text https://codepen.io/NeilVanGotham/pen/zxOdZZM

NeilVanGotham

CodePen

Reducing text animation

...

MarkBoots•2w ago

dont know what kind of effect you're going for, but this could be another way https://codepen.io/MarkBoots/pen/PwYKmKe

MarkBoots•2w ago

NeilVanGothamOP•7d ago

That is exactly what I am looking for, thank you!

ProdJuan•6d ago

great! please mark/tag this question as solved so others recognize you're satisfied with the resolve. thanks! 😁

Gaming

Programming

Animate to just the initals of a name

Did you find this page helpful?