Create an animated 3D text effect

Love Lost by Canada's Jam3 is a beautifully dark, mobile-ready interactive poem with real heart about the enduring feelings around lost love. The website layout was built using HTML5 with the GSAP library powering its animation, one of its most visually striking features is its animated 3D text that really brings Love Lost's poetry to life.

It looks impressive as hell, and it's not hard to incorporate into your own work to create an engaging user experience; here's how it's done.

Love Lost's 3D text comes right out of the screen at the viewer

Love Lost's 3D text comes right out of the screen at the viewer

01. Initiate the HTML document

The first step is to define the structure of the HTML document. This includes the HTML container that initiates the document, which contains the head and body sections. While the head section is primarily used to load the external CSS file, the body section will store the visible page content created in step 2.

<!DOCTYPE html>
<title>3D Text Movement</title>
<link rel="stylesheet" type="text/css" href="styles.css" />

02. Visible HTML content

The visible HTML content consists of an article container that contains the visible text. The important part of the article container is the 'data-animate' attribute, which will be referenced by the CSS to apply the visual effects. The text inside the article is made from a h1 tag to indicate that the content is the page's main title.

<article data-animate="move in">
  <h1>Hello There!</h1>

03. CSS initiation

Create a new file called 'styles.css'. The first set of instructions set the page's HTML container and body to have a black background, as well as no visible border spacing. White is also set as the default text colour for all child elements on the page to inherit; avoiding the default black colour of text making content appear to be invisible.

html, body{
  background: #000;
  padding: 0;
  margin: 0;
  color: #fff;

04. Animation container

The content container referenced with the 'data-animate' attribute has specific styles applied. Its size is set to match the full size of the screen using vw and vh measurement units, as well as being slightly rotated. An animation called 'moveIn' is applied, which will last for a duration of 20 seconds and will repeat infinitely. 

[data-animate="move in"]{
  position: relative;
  width: 100vw;
  height: 100vh;
  opacity: 1;
  animation: moveIn 20s infinite;
  text-align: center;
  transform: rotate(20deg);

05. Animation initiation

The 'moveIn' animation referenced in the previous step requires a definition using @keyframes. The first frame starting at 0% of the animation sets the default font size, text positioning and visible shadow. Additionally, the item is set with zero opacity so that it is initially invisible – ie. displayed out of view. 

@keyframes moveIn {
  font-size: 1em;
  left: 0;
  opacity: 0;
  text-shadow: none;
  *** STEP 6 HERE

06. Animate into view

By using multiple shadows you can enhance the 3D effect

By using multiple shadows you can enhance the 3D effect

The next frame is placed at 10% through the animation. This frame sets the opacity to fully visible, resulting in the text gradually being animated into view. Additionally, multiple shadows are added with blue and decreasing colour values to give the illusions of 3D depth to the text.

  opacity: 1;
  .2em -.2em 4px #aaa,
  .4em -.4em 4px #777,
  .6em -.6em 4px #444,
  .8em -.8em 4px #111;

07. Finalising the animation

The final frames occur at 80% and at the very end of the animation. These are responsible for increasing the font size and moving the element towards the left. New settings are also applied for the text shadow to animate towards, while also fading the text out of view from frames 80% to 100%.

  font-size: 8em;
  left: -8em;
  opacity: 1;
  font-size: 10em;
  left: -10em;
  opacity: 0;
  .02em -.02em 4px #aaa,
  .04em -.04em 4px #777,
  .06em -.06em 4px #444,
  .08em -.08em 4px #111;

This article was originally published in issue 273 of creative web design magazine Web Designer. Buy issue 273 here or subscribe to Web Designer here.

Related articles: