Tool Tip: Moving Letters With Anime.js and CSS

Animated font effects are real eye-catchers. Used correctly, they can enhance your design. Moving Letters provides you with 16 fantastic visuals. The Swedish designer and developer Tobias Ahlin has an impressive backlog of references. First of all, he was one of Spotify's first contributors and is responsible for its design. Today, he works for Mojang, developing Minecraft. On the side, now and then, he likes to toss some smaller, and some bigger side projects into the masses.

Moving Letters by Simple Means

His open source project Moving Letters, for instance, is a growing collection of animated text effects. Tobias uses CSS and JavaScript, supported by the animation engine Anime.js. [caption id="attachment_103208" align="aligncenter" width="1024"] Code Snippets to Go. (Screenshot: Noupe)[/caption] The project's website itself is an impressive piece of design, which is not lacking in animation. On the landing page, you'll find a clear overview of all effects. A click on a text opens the respective detail view, which provides the visual effect, as well as the required code snippets in HTML, CSS, and JavaScript. This allows you to integrate the effect into your projects via a simple copy and paste.

Ahlin Provides Further Useful Tools for Web Developers

Tobias made the code available under the liberal MIT license. Thus, you can use it for free, even in client commissions. You may already know Tobias Ahlin from his other, similar projects SpinKit and TypeSource. The SpinKit displays animated status indicators, while TypeSource is a source of inspiration for the proper use of Google Web Fonts. All three projects deserve a bookmark in every designer's toolbox.