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

Receive our bi-weekly Collective or blog updates right in your inbox.

Which newsletter would you like to receive?

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.