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.

Want to make your own engaging site? Try a website builder tool, and keep things running smoothly by picking the right web hosting service.

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>
<html>
<head>
<title>3D Text Movement</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
*** STEP 2 HERE
</body>
</html>

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>
</article>

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 {
  0%{
  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.

10% 
{
  opacity: 1;
  text-shadow:
  .2em -.2em 4px #aaa,
  .4em -.4em 4px #777,
  .6em -.6em 4px #444,
  .8em -.8em 4px #111;
}
*** STEP 7 HERE

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%.

80%{
  font-size: 8em;
  left: -8em;
  opacity: 1;
}
100%{
  font-size: 10em;
  left: -10em;
  opacity: 0;
  text-shadow:
  .02em -.02em 4px #aaa,
  .04em -.04em 4px #777,
  .06em -.06em 4px #444,
  .08em -.08em 4px #111;
}
***

Note: whatever project you're embarking on, having cloud storage that can cope is essential (our guide will help).

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:

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Leon Brown

Leon is a freelance web developer and trainer who assists web developers in creating efficient code for projects. He has worked on front-end and server-side web applications, having taught himself to code using an Amstrad computer in the 1990s. Leon has written an extensive selection of tutorials on web design for Web Designer Magazine and .Net, as well as introductions to programming concepts for beginners.