Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

CSS: How to animate text titles

The front-end developers on reveal how the opening splash screen’s title text was dynamically rendered using CSS and Tween transitions



The site title sequence

On the opening page of we see a poignant paragraph of text glide draw into view in the top-left corner. In this technique we’ll look at how the site achieves this, suggesting tips for emulating this element. Please do keep in mind however that this is just one method to achieve the effect we’re highlighting and there are many solutions for re-creating it how you wish. As with most things in web design, your only limit is your creativity!

Link libraries

Over the next few steps we’ll examine a simplified version example based on extracts of HTML, CSS and JavaScript. Beyond using pseudo-elements we’ll also detail code in Step 6 utilising both jQuery and GSAP animation libraries. So begin with a new project within the IDE of your choice, this is Sublime Text 3 in our case ( Let’s start by attaching those scripts to our page:

001 <!-- Place in the head of your page -->    
002 <script src="https://cdnjs."></script>    
003 <script src=""></script>

The HTML code

Here very simply we have our basic HTML markup structure for our element. First we have a static <h2> heading version of our page title, which is CSS styled to be ‘visuallyhidden’ – unseen from view but useful for SEO optimisation. Principally though, inside a <div> container we put each line of our title within <p> tags, both styled by our CSS. From here we synchronously animate each of these lines into view:

001 HTML:    
002 <h2 class="visuallyhidden">A heart-breaking journey, a ground-breaking motion picture</h2>    
003 <div class="teaser__title">    
004 <p class="line">A heart-breaking</    p>    
005 <p class="line">journey</p>    
006 <p class="line">a ground-breaking</    p>    
007 <p class="line">motion picture</p>
008 </div>    
009 CSS:    
010 /* Class shown for additional     reference */    
011 .visuallyhidden {    
012 position: absolute;    
013 overflow: hidden;    
014 clip: rect(0 0 0 0);    
015 height: 1px;    
016 width: 1px;    
017 margin: -1px;    
018 padding: 0;    
019 border: 0    
020 }    

Style the title elements

Moving over to the CSS code, we have our global classes for styling the appearance of our container and title elements. These are obviously reflective of how they appear within the Amy site, including font and colour choice and so on. However the most important thing here will be defining the classes for the pseudo-element that we will place below each line in the next step.

001 CSS:    
002 // The global appearance    
003 .teaser__title {    
004 color: #FFF;    
005 font: normal 90px/110px AkzidenzGroteskBQ, sans-serif;    
006 letter-spacing: 8px;    
007 position: relative;    
008 text-transform: uppercase;    
009 }    
010 // We force each line to fit its     content, then line will inherit of this width    
011 .teaser__title .line {
012 clear: both;    
013 color: inherit;    
014 float: left;    
015 margin: 0 0 5px;    
016 position: relative;    
017 visibility: hidden;    
018 }    

Add the pseudo-element

Below those CSS classes we’ll add our :after pseudo-element. This is the part that styles the border-like underline below each of our title’s paragraph lines, and these will be manipulated via our timeline of transition. We will also need to create a CSS class to control it because you don’t have access to pseudo-elements in the DOM.

001 CSS:    
002 // We use a pseudo-element to     create the border in the bottom of each line (underline)    
003 .teaser__title .line::after {
004 left: 0;    
005 position: absolute;    
006 top: auto;    
007 background: #FFF;    
008 bottom: 0;    
009 content: " ";    
010 display: block;    
011 height: 7px;    
012 -webkit-transition: width 300ms     cubic-bezier(.77, 0, .175, 1);    
013 -moz-transition: width 300ms     cubic-bezier(.77, 0, .175, 1);    
014 -ms-transition: width 300ms cubic-    bezier(.77, 0, .175, 1);    
015 -o-transition: width 300ms cubic-bezier(.77, 0, .175, 1);    
016 transition: width 300ms cubic-bezier(.77, 0, .175, 1);    
017 width: 0;    
018 }    
019 // We create a state for the manipulated line. It will be important     after    
020 .teaser__title {    
021 width: 100%    
022 }

JS and GSAP animation

For our main coding step we will be using jQuery to access the DOM elements, although you can do it with vanilla JavaScript. Secondly we utilise the wonderful Greensock GSAP library ( to set up a Tween timeline and control the animation of our title sequence. The key here is the call of the draw function when each transition starts. This will launch the drawing of the line we previously created within the CSS code. Simply call the function now!