How to create a slick CSS animation from Alien
The title sequence for Alien is iconic. It sets the mood of the movie perfectly. Let’s see how we can recreate it as a web animation!
TLDR
You can watch the title sequence on YouTube.
Here is the finished animation.
About the title sequence
The title is unsettling. It opens with a still scene of far away shot of planet and the camera is slowly panning across it. Slowly some disjointed bits of the title fade into view turning from a bluish hue to white. There is exaggerated spacing between the letters, so that when the bits of the letters finally resolve to a word, it still feels odd to recognize it as a word. It is backed by a moody instrumental.
The typeface is san serif. In an interview with The Art of The Title, the Title Designer Richard Greenberg says the following about the typeface:
It’s probably a slight variation on Futura, but it wasn’t custom. It was incredibly simple, but it struck a chord. Maybe because it was attached to one of the most frightening movies ever made!
The typeface probably is Helvetica Black. I have used a similar font called HomepageBaukasten Bold in my implementation.
You can read the full interview with Richard Greenberg to learn more about the design of the title sequence.
The animation
The duration of the title sequence is 2 minutes. The animation has 3 parts:
- Background pan - The background is panning slowly to the right. When it reaches a point far to the right, it fades out. This runs for the duration of the title sequence.
- Credit reveal - Credits of the crew are faded in and out. I only included a credit for for Ridley Scott to fill the void at the beginning. I wanted to keep it as simple as possible. This occurs 5 seconds into the title sequence, and has a duration of 4 seconds.
- Title reveal - The title “ALIEN” is revealed segment by segment of each letter. This beings 12.5 seconds into the title sequence. A new segment is revealed approxmiately every 4 seconds.
A good starting point is to set up some CSS variables to mark out some key values to build a timeline around. It is the third part that has the most going on and has element relying on each other. This is what I set-up:
Let’s go through each animation part now.
Part 1 - The background pan animation
The key to getting this background pan animation right is the having an eye-catching image with a decent resolution. We only want to display a cross-section of the image zoomed in. Therefore it needs to look good up close.
I created the background image using a composite of 2 space images I found from Unsplash. The main image is a solar ecliplse. I painted in the distinctive orangish hue and touched it up to get it closer to the original.
Below is the finished background image. The green box in the figure below shows the section we display as the background.
We want the background to be responsive but show that same cross section across all viewport sizes. Similar to a movie player, we can create a letterboxed appearance on smaller screen sizes.
To do this we make the body
a grid and center the “title” div
that has the background image. We give it a fixed aspect ratio (1920:1080) that matches the background image. We zoom in on the section by doubling the size of the background background-size: 200%;
and center it vertically using background-position: 0% 50%;
.
The key to the animation is that the image has overflowed the viewport – half of it is out of view on the right-hand side. To animate it, we want to change the X value of background-position
to shift the background horizontally.
Here is a simplified example of this animation part.
In the final version, a second animation is added to fade out the title at the end of the sequence.
You may notice that the duration of the bg-scroll
animation is over 3 and half minutes (210 seconds). Why is that? The easing is linear, we want a constant rate for the pan. However to compensate for not having the perfect image, I increase the animation-duration
so that it pans close to the edge of at a slow constant pace. The second animation fadeout
effectively hides the entire title at 2 minutes. Probably the better way to get to a perfect result would be to tweak the values for background-size
and background-position
, I just found this the quickest route to getting the desired outcome.
Part 2 - Credit reveal animation
We to show the credit for “Ridley Scott” for 3+ seconds and then hide it. We are animating the opacity
of the element. Nothing unexpected here I would say!
Part 3 - The title reveal animation
In order to animate the title, we need cut up the letters into individual segments. This is the tricky part.
The actual animation is fairly straightforward. We are transitioning the background-color
from transparent to a blueish hue to white finally.
Initially, I animated opacity
also, but I found setting the intial background-color
as transparent and changing the value to blue and then white matched the original.
It was just a case of playing with the keyframes and easing to get the exact feel right.
We can use the aforementioned CSS variables to place each segment animation at the correct point in the timeline using animation-delay
. We do a calcuation using these variables and multiply it by an ordinal number as below:
If you want to learn how to cut up the letter into segments, read on.
Cutting up the letters into segments
As a starter, let’s get the size and spacing of the title correct. The title has a small margin on the top and sides. The letters are evenly and widely distributed in the available space.
Let’s take the basic HTML where we have each letter as its own element.
We use a grid on the h1
to evenly divide the space with each grid item (letter) taking up 1 fractional unit (fr).
Here is what we got so far…
The 4 options for cutting up the letters are:
- Create 3 versions of each letter stacked up. You can duplicate each letter with the
::before
and::after
pseudo-elements sourcing the letter from adata-letter
attribute e.g.<div data-letter="A">A</div>
. Then, you can cut out a portion of the letter withclip-path
to have 3 referencable segments of a letter. The limitation is that the letter ‘E’ requires 4 segments! - You can create the segments of the letter using multiple
background-image
instances utilising various gradients to create the shapes. Animatingbackground-image
is more challenging as you may need to repeat values for keyframes. - You could nest multiple elements into each letter
div
to represent a letter part and style each one. It could be any arbitary element suchi
to keep it short. It is more straightforward to animate an element rather than a background image. I think this is the easier option. - You could create the title as a
text
element in a SVG. Then transform each letter to apath
. Then, you can divide eachpath
into the segments required (morepath
elements). In the Killing Eve title sequence in this series, I converted atext
element into individualpath
elements. You can read that if you are curious about that process.
Personally, I find it is the easiest editing the title as a SVG in Inkscape (approach 4). However, I will go for approach 3 to demonstrate how we can stick with HTML and do it all in the browser. The markup looks like this:
We want to position each i
element absolutely, relative to each letter div
. We can then style each i
as an overlay on top of the letter.
Now we have a green overlay like below.
What I found easiest is to use a polygon clip-path
and edit it in the devtools (Firefox in my case). For example I will add a triangle polygon to the element: clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
. We want the clip path points to be in percentages to ensure that it is reponsive.
In the devtools, I can position each of the points to match the outline of the left arm of the letter A. I need to add a fourth point by double-clicking on the line to match the shape. You can see the process in action in the video below:
This is the codepen with the segment of the letter A defined:
This process needs to be repeated for each segment. Approximately a dozen times. Once this is done, you can set the color
of the h1
to transparent and then animate each segment in the correct order.
I have left the text content for each letter. I used clamp()
with the font-size
to make the title responsive to the viewport.
Alternatively, you could remove the text content. You would need to set the width
and probably an aspect-ratio
to emulate the x-height of the text.
Final thoughts
There was quite a bit of work for this one. Anything that requires preparing images is more time-consuming. While the actual keyframe animations are fairly straightforward, the associated styling required some experimentation to get everything coordinated. The background pan animation is intriguing, I may employ it in a regular webpage somewhere sometime. It is a new trick to add to my collection.
Source code
The source code is available in this github repo.
You can check out all of the animations of this series in this codepen collection.