Font Expansion Animation

Introduction

In web design, dynamic typography effects can significantly enhance user experience, making text more engaging. In this blog, we will implement a font expansion animation where the font weight, width, and letter spacing change smoothly when hovered over, creating an appealing effect.

Final Effect

Code Explanation

1. Choosing a Variable Font

This example uses Smooch Sans from Google Fonts, which supports variations in weight (wght) and width (wdth).

font-variation-settings:
  'wght' var(--wght),
  'wdth' var(--wdth);

These custom properties allow us to dynamically adjust the font’s thickness and width, creating smooth animation effects.

2. Defining CSS Variables for Animation

.animated-text {
  --wght: 100;
  --wdth: 100;
  --letter-spacing: 0;
}

.animated-text:hover {
  --wght: 600;
  --wdth: 300;
  --letter-spacing: 0.6rem;
}

Here, we use CSS variables to control font changes. When hovered over, the font weight increases, the width expands, and the letter spacing enlarges.

3. Adding Transition Effects

.animated-text .letter {
  transition:
    font-variation-settings 1s ease-in-out,
    letter-spacing 2s ease-in-out;
}

font-variation-settings 1s ease-in-out: Smoothly changes font weight and width over 1 second.
letter-spacing 2s ease-in-out: Adjusts letter spacing over 2 seconds for a fluid effect.

Conclusion

This code demonstrates an elegant way to animate typography using CSS variables and variable font features. You can experiment with different fonts and adjust animation parameters to create more personalized effects!

Hope this blog helps you! 🚀