Create an animated 3D text effect

[Rss Bot 1]

Love Lost by Canada's Jam3 is a beautifully dark, mobile-ready interactive poem with real heart about the enduring feelings around lost love.

• Make interactive 3D typography effects

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

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.

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.

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.

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. 

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. 

06. Animate into view

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.

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

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:

• Create a glowing neon text effect
• How to debug web animations
• Create storyboards for web animations

View the full article