Inspiration for Letter Effects

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

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

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 up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 27

Comments are closed.
  1. Nothing is happening for me on Firefox (49.0.1) or Chrome. 🙁

    Nothing happened on iOS Safari, either.

    No console errors, and nothing appears to have not loaded.

    • Oh, whoops, I see it now. I didn’t realize you had to click the next/previous buttons. I thought those jumped between the different effects.

      Sorry!

  2. Awesome work! Question, how would I implement this to change phrases/words automatically, for instance, like auto-typing?

    • Didn’t checked the code in detail but pretty sure setInterval will do de job … but if you don’t have any interactions that trigger the animations you can do this with pure css animations if you’r word are correctly formatted.

  3. Wow! such nice and many effects! really inspiring!
    Was looking for Hysteria but could’t find it 🙂

    • Very nice. I copied and it sort of works for me. In my case after you click Next or Previous, the letters do animate. but all of them jump down by about 100px. 🙁

  4. This is the disadvantage of those who have older browser, they will not enjoy the appealing effects

  5. The advertising in some posts is a little disturbing. But i like your page very much.

    • Hi Carsten, thanks for your feedback. Could you please tell us a bit more on why you find the advertising disturbing? Your feedback would help us a lot. Thank you.

  6. Wow! I can’t choose in 18 different letter effect because, all looks awesome. Thanks for sharing this.

  7. Hello, Thank you very much for the post.
    I have just a question : how can we trigger the animation to an anchor (not the next / prev button) from the page

    Ex : anchor1 | anchor2| anchor3