With the latest design trends of slanted shapes and headers dominating the web, it’s safe to say that there are huge libraries and templates to choose from when it comes to the look and feel of a website. But what about the message? The functionality of headline animations can be combined with these trends to make a strong yet impressive statement.
The coolest animated text effects around the web, part 1: Frameworks
Most of the items below have been tested on various browsers and are safe to use on your site while others are experimental and created simply to be a fun exercise.
Here’s one for the coder. Codrops is a blog that provide readers with tutorials, trends and inspiration for the web. In March 2016 they published an article on how to animate SVG letters with a plugin using Segment.
Codrops also has a whole stack of other typographic examples for the web that will make your jaw drop.
Ever heard of СodeHolder? It’s ThemeKeeper’s own website library for plugins and code scripts created by a community of developers with over 21.000 items to choose from. One of them is Text FX 2 which is a text animation generator that makes it super easy to create your own customised text animation. This plugin enables the user to choose their favorite font, colour, animate multiple lines of text and loop sequenced animations. Basically, you choose what you want the text to do via drop-down menus and the code is generated for you. Easy-peasy!
Here’s the demo with several examples.
The animation files can then be imported into WordPress (check out their WordPress guide), comes with mouse events support and is SEO friendly.
Some of the functions available are:
- Responsive design
- Animating both letters and words
- Control speed and stagger
- Full compatibility with all the latest browsers with fallback for older browsers
If you prefer to dig into the code, the code sample below is great but if not, don’t worry, there is a WordPress plugin that will do the trick just as well.
Next in the series: