I’ve created a set of guidelines that have been helping animation studios, agencies and freelancers, who work with Slack to produce high-quality animated content, contributing to the growth and recognition of Slack branding.
Full guidelines can be found here: https://brand.slackhq.com/motion
Motion design
A little movement can provoke an animated response. These guidelines will help you move your audience through the use of motion.
Highlights
These animation principles apply to all types of animation at Slack
Animation should draw the eye to what’s most important within a scene
Illustrations and characters must come from our existing library
Slack motion design values
These values inform how we approach motion design in all our projects.
Engaging Keep the viewer interested without distracting them
Purposeful Tell a story and lead the viewer through it
Clear Present complex ideas in ways that are easily understood
Delightful Imbue animation with a spirit of playfulness
Animation principles
Welcome to our animation constitution! Let these principles guide you in your movements, but please avoid cartoonish exaggeration in your animation. Aim for “playful,” not “silly.”
Staging
Bring focus to what's most important within a scene. Every movement should direct the eye to where it needs to be.
Overshoot
Animations should go a little beyond their final pose, then settle back into that pose.
Follow through
Each object has its own unique inertia, which should be reflected in the animation. Avoid stopping objects all at the same time.
Anticipation
Elements should have a realistic wind-up before large movements to prepare the viewer for the coming action.
Easing
Easing specifies the rate of change of a parameter over time. While we don’t adhere to strict easing values, we employ it when needed to smooth out animations.
