Animating Text Block

This concept is an exploration into the different ways animated text can be applied to various website layouts. Nine different Squarespace templates were staged with animated text in a number of animation styles. The focus of the animation styles were basic movements with minimal effects, such as scaling and position. Some of the effects that were explored include:

• Scaling text left and right

• Position offsets

• Scrambled text reveal

• Opacity

• Time displacement

Examples across the web

Animated text examples can be found all over the internet — you can find a couple below from Zapier and Newlab.

Concept demo

The video below begins with a common use case of the user contemplating how to display a set of items in a more expressive way than a simple list — in this case, it's an event targeting the “designers, creators, and makers who think like artists”.

The demo goes on to illustrate how various text animation styles can be applied to many different fonts and templates. As well as how many animation styles can be applied to a single template.