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

Posted on by


The examples in our last post on frameworks for animated text show a great way of practising the animation muscle, but once you know how to code examples that already exist, where do you find inspiration to create new letter animations? Don’t worry, we got your back. We’ve listed the most powerful typographic animation that will make your website stand out. Try to animate them if you can!

Inspirations for letter effects with anime.js

In October 2016, Codrops combined anime.js with three other frameworks to create a tutorial for coding simple and creative letter effects. The results is a set of 18 elegantly animated headlines and enhancing statements that would otherwise be lost in the background image. This is by far the most inspirational text animation examples out there.

WWF Tiger Challenge

WWF’s Run4Tiger website was developed by Hungry Boys, a creative agency in Moscow. It cleverly transforms a strong typographic message into an image of a running tiger to visually communicate how the problem of endangered tigers can be solved by making positive decisions in the future. The animation is built by using HTML5, JavaScript, Canvas and is triggered by the user scrolling down on the website. This is a great example of using text animation to strengthen a business message.

This is how the creator Ksenia Apreysan describes it on Creative Bloq:
We incorporated use of the tracking pad and scrolling to emphasise moving forward, to draw parallels with running and ultimately do something positive and future facing to support this endangered species – which is also a pretty nifty athlete in its own right!

Petar Stojakovic

Petar Stojakovic is a digital product designer and art director who runs his own small studio in Serbia. Even though the team is small, the website design is very impressive and uses advanced web technology. The headline shown is using the Animated letters framework mentioned earlier and is a great example of how to use an already existing framework to create your own customised typographic animations.

YEOSH

The YEOSH website is a great illustration of how simple it can be to fade in text nicely on top of an image. The quote uses the CSS transform property to slide the text from the bottom up when the user scrolls down to the relevant part of the page.

Unitasking

Trent Walton’s website is really special. As a designer and web builder with an interest in typography, he creates unique headlines for each of the blog posts on his website. In the example above, he uses CSS and JavaScript to make the ‘I’ of the word ‘Unitasking’ stand out on mouseover by turning it into a ‘1’. Even though this looks very pretty, the purpose behind the effect relates to the article content. And as if that wasn’t enough, his animated headlines looks good in all browsers and are always responsive. How clever!

Related articles: 

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

Posted in gallery