Inspiration for Letter Effects

A set of inspirational letter animations for display typography effects powered by anime.js.

LetterEffects_800x600

View demo Download source

Today we’d like to share some inspiration for letter effects with you. We wanted to explore some simple, creative animations for display typography and large headlines using anime.js. These kind of animations can really enhance a certain message; combining these effects with a fitting font and playing with transforms opens up a huge range of possibilities. We hope this set inspires you and gives you some ideas on how to use an animation library like anime.js for this purpose.

Attention: We’re using 3D Transforms, so modern browsers only!

LetterEffects01

For the effects we created a little plugin that can be used as follows:

// Initialize
var txt = new TextFx(this.el.querySelector('.title'));

// Show letters: 
// txt.show([effect] [,callback]);
// If nothing is passed, then there's no animation.
// ´effect´ can either be one of the predefined effects: ['fx1',...,'fx17'] or 
// an object literal representing both, in and out animations (anime.js based).

// Example:
effect = {
	in: {
		duration: 500,
		delay: function(el, index) { 
			return 250+index*40; 
		},
		easing: 'easeOutExpo',
		opacity: 1,
		translateY: ['50%','0%']
	},
	out: {
		duration: 500,
		delay: function(el, index) { 
			return index*40; 
		},
		easing: 'easeOutExpo',
		opacity: 0,
		translateY: '-50%'
	}
}
// ´callback´ is the callback function, after all the letters finished the animation.

// Hide letters: 
// txt.hide([effect] [,callback]); (same logic of show)

For more info on how to use anime.js, check out the documentation.

The essential stylesheet for the effect itself is lettereffect.css. Note that we’ve created a little slideshow script to navigate through the different words to showcase the effects.

Browser Support:
  • ChromeSupported
  • FirefoxSupported
  • Internet ExplorerSupported from version 11+
  • SafariSupported
  • OperaSupported

References and Credits

View demo Download source

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 leanirng CSS now.

Feedback 28

Follow this discussion

Leave a Comment