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.

Code Snippets to Go. (Screenshot: Noupe)

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.

Dieter Petereit

Dieter Petereit is a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called web design and has carried on ever since. Two decades ago he started writing for several online publications, some well, some lesser known. You can meet him over on Google+.

Leave a Reply

1 Comment on "Tool Tip: Moving Letters With Anime.js and CSS"

Notify of
avatar
Sort by:   newest | oldest | most voted
Carolyn
Guest

Animated texts are eye-catching
Excellent post

wpDiscuz