Motion
Our motion system is made with tools, ideals, and movement principles that create a recognizable identity across our video assets. It’s built from our brand’s foundation, containing elements that push the envelope and open the way forward for narrative building and storytelling.
Resources
Below are links to downloadable assets, guides, reference materials, and more. If you’re an external partner, you can download resources from the Brand Asset Library.
After Effects templates 
Otto (motion generative tool)
Motion reel
Motion ideals
Motion ideals
In order to give purpose and meaning behind how our motion comes to life, we’ve developed four ideals. Motion ideals guide the creation of all our motion assets and designs. They help us inspire fresh thinking, establish shared themes, and differentiate our motion from other brands. Here’s a look at each ideal.
When creating anything with motion, think like a storyteller. In great stories every element — characters, settings, dramatic moments — exists within an invisible structure. In our motion design, diverse components such as type, messaging, photography, footage, and product should share a common thread that ties them all together.
Consider this:
- Is there a narrative that unites these elements?
- Is there a beginning, middle, and end?
- Do actions trigger appropriate reactions?
- Are the sequences logical and orderly?
We aim to give people and businesses new ways to move forward. Each time we encounter something closed — a system, a way of working, or a frame of mind — we aim to open it up so everyone can have the momentum they need to keep moving. The basic behaviors of the Square motion system reflect this instinct in visual, kinetic form.
Consider this:
- Does motion move left to right?
- Does motion move bottom to top?
Consider this:
-> Does motion move in to out?
-> Do the moves convey a clear message?
Our motion should eliminate complexity and reveal simple solutions that create time, space, and confidence for people in their work. Business owners seize opportunities; our role is to remove anything that blocks the way or derails that path forward. This sense of opportunity lives within everything we create.
Consider this:
- Are sellers and buyers the protagonists?
- Does the motion paint a simple picture?
- Does it use pacing and spacing for effect?
- Are you left with a sense of opportunity?
By highlighting the most impactful information — useful product features or content people can relate to and learn from — our motion assets should help business owners make the most informed choices for themselves. Making hundreds of small decisions every day has a big impact. We want to help make it easier for people in their day-to-day work.
Consider this:
- Does motion help provide another layer of information?
- Are the right details highlighted?
- Do we frame up choices?
- Could it help people make a decision?
Motion system
Motion system
To bring our motion ideals to life, we developed a motion system with tactical actions you can use as you make video assets. Learn about the principles below, and use the After Effects templates to create new work.
Motion system
General principles
The basic transitional principles of our motion system can be simplified to two actions: cuts and smooth transitions.
Cut on (ease in)
- When using the cut-on transition, carry through with the motion from the previous shot (if applicable).
- Cut between elements at their peak speeds.
- This technique can be useful to tie together two separate elements.
Cut off (ease out)
- When using the cut-off transition, carry through with your motion into the next shot (if applicable).
- Cut between elements at their peak speeds.
- This technique can be useful to tie together two separate elements.
Smooth transition
- When animating an element’s scale or position, use a shorter ease out than ease in.
Motion system
Offset motion and shared momentum
Depth and continuity are important traits in our motion system. Two ways we create a more open experience are through offset motion and shared momentum.
Offset motion elevates and softens basic actions, taking something that began as singular and flat and turning it into something layered and expressive.
Shared momentum can occur as the interaction between two elements in the same frame or from one piece of motion to the next through the use of match cuts. A match cut is a cut from one shot to another in which the composition of the two shots are matched by their action or form.
Offset motion
If you work with multiple lines of copy or multiple images, offset them in time. This softens the movement so it’s more expressive.
Shared momentum
Use motion to lead the viewer’s eye or to make a connection between elements.
Motion system
Frames
Frames provide focus within the content, transition between messages, and draw the eye toward the most important parts of the narrative.
Motion system
Typography
Type presets give dynamic movement to our messaging. These 12 presets show how type cycles, shifts, and appears in all kinds of ways that add impact.
Motion system
Sequence
Sequence presets are key to creating good motion assets. These presets establish flowing narratives and help take the viewer from one aspect of a story to the next.
Motion system
Logo
Whether it’s used at the beginning or the end of a piece of content, the Square logo should play as much a role in leading or continuing the story as the rest of the motion narrative. In this example the Jewel enters, reveals the wordmark, and continues its movement. Open Motion is not about hard stops or dead ends. It’s about ongoing stories, endless possibilities, and always moving onward.
Note: Do not edit the animation of any logo action so we may maintain brand consistency across all outputs.
Otto (motion generative tool)
Otto (motion generative tool)
Otto — our own web-based motion builder — lets anyone at Square create branded motion assets on demand. It’s not a replacement for Adobe After Effects, Celtra, or Bannerfy. Rather, it’s a tool that helps create quick, simple motion assets without the need of a professional video editor.
Otto (motion generative tool)
How Otto works
Otto features preset canvas sizes, a variety of motion options, a built-in editor, and various export file types. Here are the basics for each category within the tool.
Presets
Sizes and aspect ratios are based on the ones we use most commonly at Square:
- 1920x1080 (16:9)
- 1280x720 (16:9)
- 960x540 (16:9)
- 1200x900 (4:3)
- 1080x1080 (1:1)
- 540x540 (1:1)
- 1080x1920 (9:16)
Otto (motion generative tool)
Examples from Otto
Related Content
