Letter Effects and Interaction Ideas

A couple of ideas for typography animations and letter (hover) effects for playful interactions.
LetterInteractions_Featured

Today we’d like to share four typography animations with you. Letters are such a great thing to play with and they allow for so many interesting interactions and effects to enhance a design and make decorative headlines stand out. For some animations we use anime.js. Charming.js helps us with the needed structure for the letters.

Update: We’ve created some additional demos, read more about them here: Letter Effects and Interaction Ideas (Part 2)

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

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

Here are the previews of the demos:

LetterInteractions_01

LetterInteractions_02

LetterInteractions_03

LetterInteractions_04

We hope you have fun with these little effects and find them inspiring!

References and Credits

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.