Motion

The motion guidelines follow a sleek, clean aesthetic allowing video producers to convey GitLab's ease of use and highlight messaging without cluttering the frame. These guidelines are the standard for any video involving motion graphics to any degree.

Animation

Illustration

Video producers can create large-scale, custom illustrations as part of a video concept. The illustrations should adhere to brand guidelines and match the marketing illustration style.

  • Illustrations are assembled from multiple layers revealed in sequence.
  • Each layer can have its own unique motion type which combine to create harmony.
  • Strokes and lines are animated independently with a stroke reveal effect.
Illustration animation example with motion details
Illustration animation example
TODO:
Add motion sample of illustration animation. Create an issue

Easing

Both interactive and expressive motion come with unique parameters to create scalable consistency in their use.

Illustration easing example with After Effects specs
Illustration easing example

Iconography

  • Iconography is used to convey concrete concepts, features, and benefits.
  • Motion is used to make an icon feel purposeful.
  • The design of an icon dictates its reveal.
  • Motion should be swift at 0.65 seconds.
  • Purposeful motion embraces the design elements and formulates a short visual narrative.
TODO:
Add iconography animation example. Create an issue

Dot animations

  • Dot animations help to convey abstract concepts that an icon or illustration alone can’t express.
  • Dots can be paired with on-screen copy to enforce an idea.
  • Dots are purposeful in their movement and quick moments of secondary motion and a slow drift are used to keep visual interest.
  • Animation speed is variable and can change based on video length, music, and voice over.

Voice over example: “No more stitching point solutions. All you need is GitLab.”

TODO:
Add dot animation motion sample. Create an issue

Frame composition

  • In general, frame compositions should follow brand guidelines: maintain a large amount of negative space and do not clutter the frame with excessive elements or text.
  • Frame is split into rows and columns.
  • Points of interest like text, icons, or footage can appear and move between sections to allow for more negative space between the assets.
  • Avoid diagonal movement.

Motion sample: The text above is in section 1-2 while iconography occupies space in sections 2-2 and 2-3.

TODO:
Add frame composition motion sample that demonstrates the frame grid and movement within different sections. Create an issue

Tanuki + DevOps loop

  • Whenever introducing the GitLab logo in video, the trace logo animation may be used.
  • It should animate on using a stroke reveal using Interactive Ease.
  • Don't use any other reveals such as fading on logo, having the logo move in from outside the frame, or scaling to reveal the logo.
TODO:
Add reference for interactive ease . Create an issue
TODO:
Add trace logo animation example. Create an issue
TODO:
Add link to trace logo animation file. Create an issue

Gradients

Option 1

  • Use the Adobe Illustrator free-form gradient tool to create the gradient. It can be found in the gradient panel.
  • Apply the gradient using points.
  • Use 3-5 colors.
  • To achieve softer colors, use the HSB palette and drop saturation of any brand color between 1-50%.
  • The gradient sections can also be cropped to achieve a softer look.
  • If the tanuki is placed on the background, it should be within the white area for legibility.
  • The gradient can also be used inside text and linework of icons.

Download the gradient file

Soft gradient example
Gradient example

Option 2

  • Use 3-5 colors to create an organic gradient with overlapping blurred shape layers (pink, purple, and orange).
  • Blur at 71% with 3 iterations.
  • Animate turbulent displacement evolution to create subtle animation.
Organic gradient example
Gradient example

Gradients on text

  • Emphasize words or phrases by filling the text with the gradient.
  • The gradient can be used on keywords, whole phrases, and text repetitions.
  • The text masks out the gradient.
Gradient on text example
Gradient text example

Incorrect use of gradients

  • Be careful not to go too heavy with one particular color.
  • Don't overuse motion with gradients; keep movement subtle.
TODO:
Add motion sample of incorrect gradients. Create an issue

Typographic animations

Snap edits

  • Use quick snap edits in typographic animations to elicit excitement and draw attention to specific words.
  • Use in lieu of any large-scale drifts, move ins, zooms, etc.
TODO:
Add simple snap and complex snap motion samples. Create an issue

Motion and scaling

  • Use subtle drifts to maintain movement and avoid dead frames when a more subdued treatment is required.
  • Use for moments of pause to let words sink in.
  • Drifts utilize a 2-5% scale or position change.
TODO:
Add position drift and scale drift motion samples. Create an issue
TODO:
Add figure and text with detailed specs. Create an issue

Outline reveals

  • Use outlines and fills on text to create drama when revealing words or for emphasis.
  • Text can be split into two parts: a fill and a stroke.

The example below uses the following steps:

  1. Each word pops into place at 100% opacity, with “innovation” popping in at 30% opacity
  2. Each character of “innovation” is separated with an individual stroke so each letter can animate uniquely.
  3. The stroke begins to animate as “innovation” moves to meet the other words.
  4. Once in place the opacity transitions from 30% to 100%.
Outline reveals on text example
Outline reveals example
TODO:
Add outline reveal motion samples. Create an issue

Type repetitions

  • Type repetitions add visual interest while drawing attention to areas of emphasis. They are a more dynamic, spirited way to emphasize text. They can be used to emphasize a single word or a whole phrase and can animate in a variety of ways.
  • Slide the text lines upward into position behind masks one line at a time, transitioning opacity from 0-100 using our interactive ease.
Type repetition with breakdown specs
Type repetitions
TODO:
Add reference for interactive ease . Create an issue
TODO:
Add type repetition motion sample. Create an issue

Transitions

DevOps loop partial transition

  • In addition to straight cuts, when moving from animation to footage, footage to animation, or footage to footage, use the DevOps loop transition.
  • The tanuki should never be used as a transition mask. Use only the loop itself.
TODO:
Add a reference for the DevOps loop transition . Create an issue
TODO:
Add motion sample. Create an issue

DevOps loop sections as mask

  • In the DevOps loop transition, the loop is split into sections that are animated as masks to reveal another layer.
  • DevOps loop transitions can be colorful and utilize solid colors as well as gradients.

Note: The orange in the motion sample is only used to differentiate the sections.

TODO:
Add motion sample. Create an issue

Lower thirds

  • Lower thirds are designed for clarity and simplified for contrast and legibility.
  • Lower thirds will typically be white, but charcoal can be used on light backgrounds.
  • Avoid mixing colors and refer to brand typography guidelines if needed.
  • Lower thirds use the following flow:
    • Transition in: Animate opacity from 0% to 100% over 1 second.
    • Lower third remains onscreen for 4-5 seconds.
    • Transition out: Animate opacity from 100% to 0% over 1 second.
Lower thirds motion example with specs
Lower thirds example
TODO:
Add motion sample. Create an issue

Last updated at: