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.

Easing

Both interactive and expressive motion come with unique parameters to create scalable consistency in their use. Interactive ease is a standard ease in and out and the Expressive ease is an overshoot and snap back. Input the following data in the flow plugin to achieve Interactive and Expressive easing.

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.

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

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.

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.

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

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.

Gradients on text

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

Incorrect use of gradients

• Be careful not to go too heavy with one particular color.
• Don't overuse motion with gradients; keep movement subtle.

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, or zooms.
• Create a snap by jumping the text’s position in the middle of a scale animation.

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.

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

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 Interactive ease.

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.

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.

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.

Motion details: Use white text for lower thirds on a dark background. Use Charcoal copy on light backgrounds. Animate opacity 0% > 100%. Duration of transition: 1 second.

• Name: Inter Semi Bold, 60px (header)
• Organization and title: Inter Regular, 40px (subheader)