Today we’d like to share four typography animations with you. Letters are such a great thing to play with and they allow for so many interesting interactions and effects to enhance a design and make decorative headlines stand out. For some animations we use anime.js. Charming.js helps us with the needed structure for the letters. We use some modern CSS properties like CSS Grid and CSS Variables in the demos, so please view them with a capable browser.
Best jQuery Text Effect Plugins & Tutorials with Demo
hrStringColor : Set Color on Seperate Characters in string
hrStringColor is a jQuery plugin to set color on seperate Characters in string.
Option Details :
- string – Add Your strings, or it will select value automatically from your selected tag, (don’t put spaces in text)
- charFrom – Enter the index of character (for ex “5”), from where you want to start.
- charTo – Enter the index of character (for ex “25”), from where you want to end.
- color – add your favorite color, with HEX and rgb
Inspiration for Letter Effects with 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.
Fancy SVG Letter Animation
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.
