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.
Best jQuery Text Effect Plugins & Tutorials with Demo
Today we’d like to show you a fancy little lettering animation made with SVG and anime.js. The idea is inspired by Jake Bartlett’s gorgeous opening animation for the “Shading Letters in Illustrator” Skillshare class by Jamie Bartlett. While we didn’t do any shading, we wanted to animate the stroke of each letter multiple times to achieve a similar effect.
It calculates the maximum font-size possibile in order to keep the text’s width and height inside the parent.
It’s very useful in responsive situation and where we don’t know in advance the text’s length (text pulled from a CMS?). It is also very handy when we need to display text along an image and we want to avoid overlaps.
jQuery WebFonts extension adds font embedding capability to jquery using the WebFonts technology. The extension provides a flexible way to choose font from a font repository and apply on html elements.
- Flexible font repository. The extension can work with any font repository file system.
- Provides many APIs to customize and extend.
- Applies font based on the html
langattribute of the elements
- Make sure the font defined using
font-familystyle for any elements, either using inline css or external css’ available for the reader without any extra code.
- light and small (60 kB unminified uncompressed, 4x smaller than opentype.js)
- ultra fast (2x to 5x faster parsing than opentype.js)
- successfully parsed more than 2000 fonts (opentype.js had problems with many of them)
- simple structure and easy to extend
A powerful toolkit for building websites with beautiful typography.Typography.js provides a vastly simpler way to define and explore typography designs.
You provide configuration to the Typography.js JS api and it uses its Typography engine to generate CSS for block and inline elements.
Dropcap.js makes beautiful drop caps easy for the web.
Typewriting js is a
Type-scale is a visual type scale calculator.