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)
Please note that some of the effects are specifically made for hover so mobile support is limited.
Here are the previews of the demos:
We hope you have fun with these little effects and find them inspiring!
References and Credits
- anime.js by Julian Garnier
- Charming.js by Yuan Qing
- imagesLoaded by Dave DeSandro
- “Kidnap” letters created with Ransomizer
- Death icon by Freepik
Mary Magician. I m RIGHT?
Well awesome work. Thanks 🙂
Great stuff….made the swing demo work
Manoela: (I know you like to be called Mary Lou, but I just like the sound of Manoela). I have a suggestion. Instead of having a error message script for IE why not have a redirect to some other page like Google? It took me several hours to search the net to find the answer.
So for those who do not wish to to their own hunting
1. Delete Manoela’s crept from the head section
2. Paste following code
if(navigator.appName.indexOf(“Internet Explorer”)!=-1 || navigator.userAgent.match(/Trident.*rv[ :]*11\./))
//This user uses Internet Explorer
window.location = “http://www.gigiyut.com/”;
It works for me. I have no clue if it follows proper programming conventions or not.
Ransom is awesome!
Sorry, but I’m not an expert. I wanna know why the user only can see the links names in responsive design mode but not in the PC display design mode? The concept is beautiful, but some users maybe will find difficult to navigate through it.
Amazed EVERY TIME
hello,can any one implement in my Site logo text /
I liked these effects )))
Here you have a good exemple :
This is a very great demo I love it now I’m exited to try it on my own.