Letter Effects and Interaction Ideas (Part 2)

A new set of letter effects and animations for playful typography interactions.

Today we’d like to share some more letter effects with you. Just like in the first set, we play around with hover and click interactions to create some fun typography animations. For some animations we use anime.js. Charming.js helps us with the needed structure for the letters.

Attention: We use some modern CSS properties like CSS Grid and CSS Variables in the demos, so please view them with a capable browser.

The crossword demo makes use of the new CSS grid layout. By just giving a set of columns and rows for each word, we can easily position each letter in a grid layout. With a structure like this, we can automatically set each grid-row and grid-column property:

<h2 class="word word--crossword">
	<span class="word__main" data-column="1" data-row="4">Karma</span>
	<span class="word__cross" data-column="1" data-row="4">Kiss</span>
	<span class="word__cross" data-column="2" data-row="2">Heart</span>
	<span class="word__cross" data-column="3" data-row="1">Embrace</span>
	<span class="word__cross" data-column="4" data-row="3">Smile</span>
	<span class="word__cross" data-column="5" data-row="1">Innate</span>
</h2>

The word__main runs horizontally and all word__cross elements vertically. The data-row for the word__cross defines in which row the word starts. Given the number of letters and their cells, we have a 5×7 grid for this example.

Please note that some of the effects are specifically made for hover so mobile support is limited.

Here are the previews of the new demos:

LetterInteractions_05

LetterInteractions_06

LetterInteractions_07

LetterInteractions_08

LetterInteractions_09

We hope you enjoy these new effects and find them useful!

References and Credits

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

πŸ‘Ύ Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 10

Comments are closed.
  1. I have read both part 1 and part 2. I have learn some amazing stuff. Thanks for sharing.

  2. One of my favorite website I love all your work. You always come up with something new.

  3. Really great stuff, but how the heck do I make those cool typographies to begin with? I don’t know where to start or find resources πŸ™

  4. Great insights, gonna test new typos interactions right the way. Thank you very much for sharing it!

  5. First off all, very cool stuff πŸ™‚ I am trying very hard to make the crossword thing work i think its awesome. but i just dont know what to putt in the html part.