Lately, UI interfaces have been going through a bit of rejuvenation, with various trends coming up. And one of my favorite trends in the Motion Graphics world is HUD-style animation. Regardless of whether you're recreating your favorite Marvel character's helmet interface or creating your own sci-fi masterpiece, adding HUDs to your assignment will undoubtedly yield appealing results.

After Effects is an incredible tool when it comes to creating fun character animations, kinetic typography, and HUD figures. The easy-to-use shape editor and layer-based structure make After Effects the ideal candidate for creating Superhero style graphics. 

Want to learn how to create Futuristic UI with After Effects? Keep reading to find out how you can create your own HUD animations.

What is HUD Animation?

Head-up display, otherwise known as HUD animation, is how information is visually relayed to the player as part of a game's user interface. HUD animations play a significant part in making the UI look more complex and futuristic.

A HUD display is indeed an innovative system for displaying information. The technology displays the info straight into the user's field of vision and considers key parameters like the user's viewing direction and head position.  

What is HUD Animation?

In this easy step-by-step guide, you will find out how to implement some basic HUD elements. Excited to create your very first HUD animation? Let’s get going!

Shape Layers

Shape layers comprise vector graphics objects called shapes. A shape further consists of a path, a stroke, and a fill, by default. Layers that are not based on the footage are called synthetic layers. Besides the shape layer, text layers are also synthetic layers made of vector graphics objects. Therefore, most of the rules and guidelines that apply to text layers apply to shape layers also.

Shape layers offer multiple controls, with a set of transform options for an individual object and a whole set for the layer itself. Let's see how we can animate particular objects within a shape layer. 

  • Launch After effects.
  • Navigate to the topmost toolbar to find the Layer option and click on it.
  • Navigate to New > Add Shape Layer. You will now have a new Shape Layer appear in your layer panel. 
  • Click on the Pen tool in the top toolbar.
  • Click anywhere to create any shape.
  • If you draw a shape right in the Composition panel, After Effects directly adds a new shape layer to the composition.
  • You can now use stroke and fill settings to a shape, adjust its path, and apply animations. 
take shape layer and delete stroke
  • Click on Stroke to open the Stroke Options dialog box.
  • Click on the Stroke Color box to pick a color.
stroke color change
  • In the Stroke panel, you can also change the Stroke width by increasing or decreasing the stroke weight. 
change stroke width

Duplicate the Shape Layer

  • Select the layer you want to duplicate.
  • Click on the Edit menu, and a dropdown menu will appear.
  • Now, click on Duplicate, and you'll notice a new layer right above the layer you chose to duplicate.
duplicate shape layer

Trim Paths

The Trim Paths tool allows you to make accurate adjustments to shape layer paths in After Effects. Trim Paths is a rather practical feature that lets you animate the start, end, and offset of a path. We can also use the Trim Paths tool for projects related to Infographics, Shape Bursts, Text Box, Text Stokes, etc.

Now, let’s see what the Trim Paths do to the shape created by the Shape layer.

  • Navigate to the Shape Layer options. 
  • Click on the add button.
  • Click on trim paths.
  • Add a trim path.
add trim path
  • To adjust the trim path, you can toggle open Trim Paths to view the Start and End options. You can play around with adjusting the numbers for each and see what happens once you merge them.
adjust trim paths

Wiggle Effect

  • To add a wiggle effect on the trim path layer, click on the Add button on the Contents layer and choose Wiggle Paths from the drop-down menu. 
  • Open the new Wiggle Paths 1 option and play around with the parameters until you find something you like.
adjust wiggle effect

Repeater Effect

  • Now, if you want to add a repeater effect on your shape, navigate to the contents section and click on the arrow alongside the Add label and create a repeater.
  • The repeater has its own parameters like copies and offset. By default, it creates three copies, as you can see in the image.
  • You can adjust these parameters and set the copies to any number you want.
add repeater effect on shape layer
  • If you want to play your animation on loop, drag the work area, which is right below the current-time indicator, to the size of the animation and enter the spacebar.
adjust shape layer size

Rotation Effect

  • Now, if you want to add a rotation effect on your shape, navigate to the contents section and click on the arrow alongside the Add label.
  • Click on the transform effects, and you will find your rotation property.
  • You can also select your layer and hit ‘R' on your keyboard to bring up the rotation property automatically.
apply rotation effect
  • Go to the rotation property, and find the stopwatch icon to the right of the word “rotation.” 
  • You can adjust the rotation values using the rotation tool in the composition window or select the numbers in the timeline window and enter the updated values.
  • You can also hold down the mouse button on the number in the timeline window and drag towards the left or right to set the duration of the rotation.
  • Duplicate the shape layer and adjust the size as per your requirements.
create shape as you want

Shape Layer Opacity

  • Navigate to the transform effects, and you will find your opacity property.
  • Move the playhead in the time ruler where you want your animation to begin.
  • Click on the stopwatch next to Opacity.
  • Now, move the playhead on the time ruler where you want your animation to end. 
  • Update the value of the Opacity property. Here, I have set the opacity to 30%. (Note: 100%= opaque, 0%= transparent)
shape layer opacity

Glow Effect

  • Look for the Glow effect in the Effects & Presets panel.
  • Select the Glow effect and apply it to your composition.
add glow effects
  • Most of the Glow effect properties are pretty much self-explanatory. So, I recommend you play around with them to find out what they do.
glow effect properties

Final Result

Watch this video to see how the final composition looks like.

Wrapping Up

Hopefully, you're now feeling excited to go out and create some impressive HUD graphics. 

These HUD effects are shockingly easy to nail, and they're a sure-shot way to enhance the quality of your motion graphics animation video projects instantly. 

So what are you waiting for? Create some superpowered, sci-fi HUDs!

Editor: Richa Sharma

Frequently Asked Questions

HUD (Heads-Up Display) and interface both serve as visual elements in various applications, including video games. However, they differ in their primary functions. A HUD typically displays real-time information directly on the screen, such as health bars, ammunition counts, or navigation indicators, without obstructing the main view. On the other hand, an interface encompasses a broader range of elements, including menus, buttons, and interactive components that allow users to navigate and interact with the game or software.

The elements of a HUD in video games can vary depending on the game's genre and design. Common HUD elements include health and stamina bars, mini-maps, objective markers, ammunition counters, and character status indicators. Additionally, HUDs can feature contextual information like mission objectives, quest progress, and notifications. Game designers strategically position these elements to provide essential information to players while maintaining an immersive gaming experience.

HUD motion graphics refer to the dynamic and animated elements of a Heads-Up Display in various media, including video games, films, and user interfaces. These graphics incorporate movement and transitions to enhance the visual appeal and interactivity of the HUD. Motion graphics in a HUD can include animated icons, progress bars, dynamic charts, and transitions that respond to user actions or in-game events.

HUD visibility refers to the extent to which the Heads-Up Display elements are displayed on the screen during gameplay or other interactive experiences. Game designers and developers often consider HUD visibility to strike a balance between providing essential information to players and maintaining an immersive and unobtrusive gameplay environment. Adjusting HUD visibility can involve toggling elements on or off, making them translucent, or dynamically showing and hiding elements based on context to enhance the user's experience.

Deepak Kumar, a digital marketer by profession, covers marketing, SEO, social media marketing, content marketing, and email marketing. His expertise helps businesses navigate and excel in digital marketing landscapes, offering practical insights and strategies for effective online presence and growth.