The coolest animated text effects around the web, part 1: Frameworks - envato.com coupon

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.

That being said, we have combined a list of the best, most beautiful and powerful text animations that will give your website a modern feel as well as sending across a strong message. These examples can be used as inspiration for your next design project or as a tutorial to upgrade your CSS3 and JavaScript skills.

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.

Frameworks

Creative SVG Letter Animations

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.

Remember when we were talking about the experimental animations? This tutorial definitely falls under that category. The article guides you through animation demos, usage, including other JavaScript libraries and how to customise the typeface.

Codrops also has a whole stack of other typographic examples for the web that will make your jaw drop.

TextFX2 – CSS3 Text Animations

Ever heard of CodeCanyon? It’s Envato’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.

Cool Text Effects

If you’re a newbie at coding, this fully responsive text animation (which is also from CodeCanyon) will suit you. It allows you to choose HTML or Javascript to animate with and has a library of 300 pre-coded examples that you can grab inspiration or code from.

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

Anime.js

See the Pen Anime.js v2.0 logo animation by Julian Garnier (@juliangarnier) on CodePen.

Anime.js is a impressive, fast and lightweight JavaScript framework developed by Julian Garnier that animates anything from CSS properties to Javascript objects and HTML elements. It can also be used for SVG and letter animations which is still a very rare but sought after functionality for animation frameworks today. We see a lot of modern websites using SVG objects and even though the demand for animation support in this area is very high, there are not a lot of frameworks that can answer that demand. Anime.js fills that gap beautifully.

Animated Headlines

CodyHouse is a free library, providing developers with front-end resources in HTML, CSS and Javascript. In 2014, their co-founder developed a series of CSS effects for headlines with rotating words via sliding, pushing, typing and scaling. This is great if you want to send a strong message by keeping the original headline structure while changing the last word, just like in the example above.

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: 

The coolest animated text effects around the web, part 2: Inspiration

The post The coolest animated text effects around the web, part 1: Frameworks appeared first on Envato.

envato.com coupon from Envato http://ift.tt/2qZ4XPC
envato.com coupon