Letter Animations using Javascript Library Anime.js

Anime.js is a javascript framework to animate various elements in the DOM. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects. Different kind of Letter Animations using Javascript Library is possible with Anime.js. Animation sequences are also supported with this javascript library. Julian Garnier developed this amazing javascript library and released it in MIT license.

Letter Animations using Javascript Library

This javascript library can be used to animate words and letters. This will be very useful to create websites for games, parties, events etc. Tympanus created a set of very nice animations using Anime.js. The animation slideshow used in the demo created by Tympanus includes very nice effects to play with.

The main idea of the implementation includes creating an SVG for each word. Then place circle, square or triangle shapes relative to SVG. With a couple of effects, the letter animation will be formed with stunning effects using simple shapes. To showcase the effects, there is a small slideshow with different kind of letters and animations. Letter Animations using Javascript Library is also available for download.

• Animation Slideshow
• Source Code of the Slideshow on Github
• Animation Article

Main features of Anime.js

• Keyframes: Chain multiple animation properties.
• Timeline: Synchronize multiple instances together.
• Playback controls: Play, pause, restart, seek animations or timelines.
• CSS transforms: Animate CSS transforms individually.
• Function-based values: Multiple animated targets can have individual value.
• SVG Animations: Motion path, line drawing, and morphing animations.
• Easing functions: Use the built-in functions or create your own Cubic Bézier curve easing.

Full Documentation is available with examples.

Anime.js Demos and Animation Examples

• CodePen demos and examples
• animejs.com
• Stress test

Anime.js Browser Support

Anime.js is supported by Google Chrome 24+, Safari 6+, IE 10+, Firefox 32+ and Opera 15+. So in the modern world, it is safe to use for a professional project and it works on almost all devices.

Anime.js is released under MIT license and the current version is 2.2. The development is going on in GitHub repository and 380 commits are now live. Anime.js is inspired by Animate Plus and Velocity. Animate Plus is another animation library and Velocity is a very nice feature rich animation framework that intended to replace the jQuery animate function.