Motion Guideline
1. Logo Animation
2. Endcard
3. Illustration
4. Annotation
5. Text Animation Style
6. Frame Rate
7. Social
8. Photography x Animation
9. LottieFiles
10. File Naming Structure
Logo Animation
Logo Reveal Stamp
This is the Stamp logo reveal. It is seen inside the graphic end cards and anytime a stamp logo is used in animation.
Stamp Logo Assets
Logo Reveal Wordmark
This is the wordmark logo reveal. It is only used over live action footage.
Embedded in the animation is a transparent (alpha) background.
Wordmark Logo Assets
Endcard
Wordmark endcard
Examples
End cards close out motion pieces and reinforce brand recognition.
We currently use the wordmark logo end card as the primary treatment for clearer legibility across formats.
Illustrations
Illustration brings a warm, approachable feeling to our visuals. It should support
the message, adding emotion and personality without overwhelming the content.
Keep it simple, human, and intentional.
Illustration Examples — Light Background
Outlined + Filled
This is our illustration standard and primary style — mostly monotone, with one standout color used for emphasis.
Outlined
Gives a clean, chic tone — great for informative or supporting moments.
Filled
We are currently staying away from this style and using it only when necessary.
Illustration Examples — Dark Background
Illustrations placed on dark backgrounds should maintain strong contrast
for clarity and legibility. Use light-colored strokes and outlines when using
darker backgrounds.
Example 1 : Kale 2
Example 2 : Kale 3
Hand-drawn effect walkthrough
Illustrator
These hand-drawn animations below are made in Callipeg which is a frame by frame animation tool. It should only be used for short, loopable character animations because it is a lengthy process. For longer animations, animate the vector illustrations
After Effect
These hand-drawn animations below are made in Callipeg which is a frame by frame animation tool. It should only be used for short, loopable character animations because it is a lengthy process. For longer animations, animate the vector illustrations
Callipeg library
Inside the Motion Library, you'll find an Illustrations folder containing a wide range of Callipeg animated dogs. There are gifs, movs and an After Effects project that will continue to expand whenever a new dog has been brought to life. Please create a new dog name to keep the library organized and follow the naming conventions established in the current animations.
Annotation
Animated annotations emphasize specific parts of text or visuals, guiding the viewer’s attention and highlighting key points. They suggest where to focus while adding an organic, approachable feel to otherwise plain content.
Text Animation Style
Keep motion simple, clear, and intentional. Every movement should have purpose, nothing extra. Use motion to support the message, not compete with it.
1. Text Animation: Haas Typeface — Do's
simple cut
Text appears instantly without transitions.
subtle raise
Gentle upward motion with no ease, adding life
without distraction.
2. Text Animation: Lazy Dog Typeface — Do's
Type-ON
Text appears instantly without transitions.
Write-ON
Gentle upward motion with no ease, adding life
without distraction.
3. Text Animation: Haas and Lazy Dog — Don'ts
These guidelines help keep motion clear and consistent. They can be adjusted
when there’s a strong purpose or concept, as long as the motion feels intentional
and fits the story.
Fade
Fades are only used in specific moments in endcards and supers.
bounce
Skip bouncy or elastic moves.
Stretch
Avoid distorting or scaling
text unnaturally.
Obvious After
effects Presets
Avoid default presets —
they stand out and break
the crafted feel.
Slide/EASE
Skip sliding or overshooting motion — keep it direct and steady.
3D
Avoid depth or rotation — keep text flat and clean.
Frame rate
10 FPS vs 30 FPS
We’re going with 10fps because it gives the animation a more deliberate, stylized look, keeps file sizes lighter for social/web use, and speeds up production without losing clarity. Smoothness isn’t the main goal here — impact and readability are.
10 FPS (Choppy)
30 FPS (Smooth)
Social
Below are some examples of animated social videos. Each video built in a 10 FPS
very scientific ranking
These hand-drawn animations below are made in Callipeg which is a frame by frame animation tool. It should only be used for short, loopable character animations because it is a lengthy process. For longer animations, animate the vector illustrations in After Effects. Apply the "Posterize Time" effect over your 30fps animations and change the frame rate to 10fps to match the stop-motion effect that can be seen in the Callipeg animations. Utilize the Puppet tool in After Effects for character rigging.
Digest
These hand-drawn animations below are made in Callipeg which is a frame by frame animation tool. It should only be used for short, loopable character animations because it is a lengthy process. For longer animations, animate the vector illustrations in After Effects. Apply the "Posterize Time" effect over your 30fps animations and change the frame rate to 10fps to match the stop-motion effect that can be seen in the Callipeg animations. Utilize the Puppet tool in After Effects for character rigging.
DOg service announcement
These hand-drawn animations below are made in Callipeg which is a frame by frame animation tool. It should only be used for short, loopable character animations because it is a lengthy process. For longer animations, animate the vector illustrations in After Effects. Apply the "Posterize Time" effect over your 30fps animations and change the frame rate to 10fps to match the stop-motion effect that can be seen in the Callipeg animations. Utilize the Puppet tool in After Effects for character rigging.
Photography x Animation
Blending photography with animation adds subtle motion that enhances mood
and presence. It turns still moments into living scenes — gentle movement that
feels natural, emotional, and connected to the story.
LottieFiles
LottieFiles is a lightweight animation format and platform used to deliver vector-based motion across digital products and marketing surfaces.
Lottie animations are exported as JSON files, allowing motion to remain crisp,
scalable, and performant across different screen sizes and devices. Unlike video
formats (MP4, GIF), Lottie files are resolution-independent and typically much
smaller in file size.
After Effects features NOT supported in LottieFiles
1. Raster & Pixel-Based Effects
• Blur
• Glow
• Drop Shadow
• Bevel & Emboss
• Noise / Grain
• Roughen Edges
• Turbulent Displace
• CC effects (most of them)
2. Expressions
• Wiggle
• Loop expressions
• Time-based math
• Randomized motion
3. Masks
• Mask Feather
• Mask Expansion
• Inverted masks
• Multiple animated masks
• Animated mask blend modes
• Luma masks
4. Blend Modes
• Overlay
• Soft Light
• Hard Light
• Difference
• Color Dodge / Burn
5. Track Mattes
• Luma mattes
• Complex alpha matte chains
• Nested matte dependencies
6. Text Animators
• Per-character text animators
• Text effects
7. Layer Styles
• Drop Shadow
• Inner / Outer Glow
• Stroke (layer style)
• Gradient Overlay
• Satin
8. Time Effects
• Time Remapping
• Echo
• Posterize Time
• Motion Blur
9. 3D & Camera Features
• 3D layers
• Cameras
• Lights
• Z-space movement
• Depth of field
Safe Features in LottieFiles
• Shape layers
• Path animations
• Scale / Position / Rotation / Fade
• Shape strokes & fills
• Trim Paths
• Simple easing
• Simple masks
LottieFiles Export Settings
Always export the optimized Lottie version and the JSON
file when delivering Lottie animations. Optimized exports ensure better performance, smaller file size, and more reliable playback across platforms.
File Naming Structure
Always take the time to version work correctly. Do not version using the date, as often
these files are updated rapidly and dates are not kept up to date. This makes it difficult
select the correct file.
1 2 3 4 5 6 7 8
TFD_ProjectType_ProjectName_Asset_Size_FileKind_Mechanical_Version
1. Company name.
2. Subfolder on the server.
3. Name of project on brief.
4. Type of deliverable. IE: Postcard, booth, backdrop, email, social post
5. IE: 4x5, 16x9
6. IE: Video,Illustration, Mockup, Icons.
7. Only needed when creating final files.
8. Use 01-10. Do not include any other notation.
