Set Your Text in Motion with These Dazzling Effects

The trend of setting everything in motion rules the roost these days. You cannot help but to follow this madness and develop an obsession of injecting life into every detail of a website. The static era is gone. Everything is dynamic. And you know what? Users are perfectly aware of it.

For some, that is bad news, since it will take Herculean efforts to trick users into believing that a static website brings an exciting experience. For others it is an opportunity to show off, reveal your inner genius and get swept away in the world of dynamic craziness.

If you are still stuck believing that the only thing you can do with typography is to use an offbeat typeface or extravagant hover effect, then we are going to prove you wrong. You can do wonders with typography, transforming it into a thing that will not yield to others in terms of creating an impression.

And if you are no fan of immersive or heavy solutions, then this is indeed a way out. To give you a solid start, we have collected several incredible code snippets where the lettering was skillfully set in motion, bringing about an excellent outcome.

Shattering Text Animation by Arsen Zbidniakov

Just look at Shattering Text Animation by Arsen Zbidniakov. Is it not brilliant? The solution neither overwhelms visitors with lots of action and unnecessary dynamics nor does it overload your system. It just works, leaving everyone in a “wow” state.

Made with the help of GSAP tools and SVG path, this shattering effect that assembles and disassembles the text is simply incredible. What’s more, hover the mouse cursor over it and you will get an opportunity to control the speed of the process, slowing everything down. It is just phenomenal.

Text Animation by Szenia Zadvornykh

Much like our first example, this code snippet exhibits an animation of assembling and disassembling text. However, this time the artist uses Three.js to bring everything to life. This is another controllable explosion. Yep, you read me right: You can also control the speed of the animation by clicking and dragging. And if you enjoy this experiment, Szenia has some more entertaining examples. Just check out his profile.

Motion Graphic Typeface and Another Experiment by Ara

Ara has several mind-blowing experiments with typography. Both of the following examples are abstract, based on geometric manipulations and feel and look high-tech. In some ways they are even a bit bizarre.

In the first example, the text is composed of tiny pieces that slowly but surely form a 3D tunnel of particles.

In the second, each symbol is constructed from primitive polygons such as triangles, squares and rectangles that are brought in motion. It feels like someone’s digital hand is weaving it all together.

GSAP Text Animation by Nate Wiley

Nate Wiley has turned Split Text from Greensock to his advantage, recreating a marvelous text animation. He takes a regular piece of text and blows it into tiny fragments, where each one is a symbol.  After the explosion, characters move in various directions and smoothly disappear.

CSS Motion Typography: Exploding Text by Dudley Storey

Unlike the previous examples where high-end technologies stand behind the beauty of the solutions, here CSS-based motion runs the show. Dudley Storey puts in action CSS keyframe animations, transitions, JavaScript, SVG and a bit of Adobe Illustrator magic. The word shatters a bit and then breaks into polygonal pieces in such a way that you can still read it. If you want to add stylish brutality to your typography, this effect is certainly a starting point.

Many Icons in 3D using Three.js by Yasunobu Ikeda

While Nate Wiley blows text away, Yasunobu Ikeda, on the contrary, forces particles that are chaotically scattered throughout the screen to form into text. Here the particles are nothing more than tiny icons. The author uses Three.js to recreate this gorgeous 3D animation.

SVG Path animated Text by Tamino Martinius

Tamino Martinius benefits from more traditional manipulations by using SVG paths. Thanks to sleek shapes, ultra-thin lines and liquid-like behavior, the animation oozes elegance and refinement. Although it is not as mind-blowing as our first example, its powers lie in an ability to fit numerous projects since it is certainly a practical solution.

For More Practical Usage

Speaking of which, we have also included some inspiring and practical solutions. Here, type is set in motion so that you can take baby steps in this direction.

While the first two examples feature effects that can be beneficial for taglines and catchy phrases, the latter is an interesting solution for regular blocks of text.

Think – create cycle by Mikael Ainalem

Mikael Ainalem’s pen shows a cycled animation where words are highlighted in a rotation. It is an excellent way to guide users from one word to another.

P R E S S E D by Tryggvi Gylfason

Tryggvi Gylfason adds a moving line that slides from the left to right side and forces letters to follow it, thereby either pressing or pulling symbols of a word. The effect is small but captivating.

Text Scroll motion blur with TweenMax by Ignacio Correia

Ignacio Correia supplies text with a motion blur effect. When you move down in a brisk pace, the text blurs into an almost white spot. As you slow down, the words become less obscure.

A Case for Using Animation in Typography

These typographic animations compel us to stop and enjoy the action. They are as inspiring and eye-catching as animations that can be seen in other elements, such as hero areas.

Unfortunately, we do not see many of them in the wild. It seems that everyone is obsessed with using action-packed full-screen animations instead of setting simple lettering into motion. But as we’ve seen here, these effects can make just as much of an impact on users.

More Text Effect Snippets