Motion
Principles
01
Our animations showcase the precision behind our work. Every movement is calculated with purpose and backed up by functionality.
Like our product, our motion language is also for everyone. It brings personality and attention whilst providing clarity through speed.
We connect the whole world to sports through technology, it’s part of our DNA. Our motion language embraces our nature.
Logo
02
Our logo comes to life creating a distinctive dynamic balance between our brand traits.
logo
easingSfast ease In Out Circ
timings0-2 Seconds
AE PLUGINSAe NATIVE
The logo animation traces the mark in the frame to create a sense of connection and speed before it locks into the S.
Two opposing line paths with fast ease. Trim paths added to achieve final form.
lockup
easingSfast ease In Out Circ
timings0-2 Seconds
AE PLUGINSAe NATIVE
Our wordmark balances the S motion with a simple and quick letter-by-letter reveal giving a technological feel.
Fast opacity offset between letterforms to reveal the full lockup.
Typography
03
Each version of Sofa has it’s own characteristic motion behaviour, allowing us to flex the feel we want to create.
sofa BOLD
easingSfast ease In Out Circ
timings0-2 Seconds
AE PLUGINSAe NATIVE
Static reveal with an energetic upwards jump before subtly settling in place.
sofa mono
easingSfast ease In Out Circ
timings0-2 Seconds
AE PLUGINSAe NATIVE
Fast abstract decode with individual character reveal.
Iconography
04
Our iconography becomes part of our typographic system, therefore using the same motion with a slight time offset.
ICONS
easingSfast ease In Out Circ
timings0-2 Seconds
AE PLUGINSAe NATIVE
Static reveal with an energetic upwards jump before subtly settling in place.
Data textures
05
Each graphic texture has it’s own behaviour inspired by the corresponding data visualisation and sport.
DOWNLOAD
All together creating a unique motion language.
ATTRIBUTE OVERVIEW
easingSfast ease In Out Circ
timings0-2 Seconds
AE PLUGINSAe NATIVE
The motion is inspired by the ever-shifting nature of player’s stats. The key motion principle is morphing vectors.
Edit the shape path points position between frames. Fast ease in and out speed curve.
FOOTBALL BALL POSSESSION
BASEBALL RESULTS
easingSfast ease In Out Circ
timings0-2 Seconds
AE PLUGINSAe NATIVE
The motion is inspired by real-time data being added to the possession through a technological lense.
Scaling each bar from the centreline point
with a masking layer to create the pixel glitch. Fast ease in and out speed curve.
HEATMAP
easingSfast ease In Out Circ
timings0-2 Seconds
AE PLUGINSAe NATIVE
The motion is inspired by the fluidity of a heat map seen through our technological lense.
Multiple custom shape paths quickly morphing between frames. Fast ease in and out speed curve used between each of the frames.
SHOT MAP
easingSfast ease In Out Circ
timings0-2 Seconds
AE PLUGINSAe NATIVE
The motion is inspired by the players moment a basketball court.
Scaling and moving shapes with
masks to reveal the animation with a
shift before resting in place.
Fast ease in and out speed curve.
TENNIS SCORE
easingSfast ease In Out Circ
timings0-2 Seconds
AE PLUGINSAe NATIVE
The motion is inspired by the movement that naturally occurs in tennis, from side A to side B.
Scale reveal on the shapes with an overlapping wave movement before resting in place. Fast ease in and out speed curve.