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!
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.
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 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.
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.
- The Rise of Subtle Animation in WordPress Themes
- Turn your photos into animated GIFs with Photoshop actions