GitHub's motion principles
Motion and animation are used intentionally to elevate design, communication, and enrich our audience’s experience. Motion should aim to:
- Facilitate - to inform and guide through purposeful motion
- Engage - attract the attention and interest of our audience
- Impact - to be influential and memorable
Consider the following
Motion communicates — make sure it’s supporting your overall message.
Be quick, but legible. Keep in mind your audience’s attention span, while also ensuring your work will be understood and easy to read. Establish rhythm and timing accordingly.
Delight our audience. Extra polish, sparkle, and personality can elevate straightforward and clean designs.
Consider your audience and viewer context, and balance your work accordingly. Event promos should inspire and delight. Technical demos should be precise. A glitchy effect used during a live-stream may appear broken, not artful.
Dont create obstacles or distractions. Aim for legibility, accessibility, and intentionality.
Our motion should never feel like an out-of the box presentation effect. No slapping, rolling, or bouncing. (Unless it’s related to a character’s movement.)
Unpolished. If you don’t have time to get it right, then you should simplify your approach.
Animating text blocks
Example of motion styles for revealing blocks of text of various lengths:
Animating titles
Example of motion styles for revealing titles:
Text animation dont's
Our motion should never feel like an out-of the box presentation effect. No slapping, rolling, or bouncing. (Unless it’s related to a character’s movement.)
Animating product UI demos
When product marketing calls for product UI demos, products should be displayed accurately and with minimal abstraction, and all text and image content should contribute to a cohesive and appropriate overall narrative. We advise working closely with product team to accurately represent GitHub products in motion.
Motion in action
Examples of the brands animated type in social media announcements created for Universe 2023:
Example of text and UI together in this sizzle reel video for Copilot X.