DesignBeginnerPreview
Logo Animation
Learn to turn a flat logo into a short, polished animated sting in Adobe After Effects: prepping vector artwork from Illustrator, building path reveals, shape morphs, and particle builds, shaping motion with proper easing and the graph editor, and exporting the exact files the web and broadcast each demand.
For designers, brand owners, and aspiring motion artists who want to animate static logos into short stings and deliver correct files for web and broadcast.
Course content
Workbook & downloads
Put the course into practice — a printable workbook plus editable templates you can fill in and reuse.
Preview the workbook
This workbook turns the course into a finished animated logo package. You will prepare layered vector artwork in Illustrator, build a composition at a real delivery spec, animate path reveals, morphs, particle builds, and masked wipes, shape every move with proper easing and the graph editor, and export the exact files the web and broadcast each demand. Work through one section per module and finish with a transparent WebM, an optimised GIF, and a ProRes 4444 master you could hand to a client today.
Setting Up the Logo for Motion
Separate the logo into animatable vector parts, import it correctly, and build a composition at a real delivery spec.
Exercise: Layer-and-Label Prep Drill
Take one real logo and prepare it in Illustrator for animation. Separate it into independently moving parts on named, top-level layers, then expand and outline so what you see is what imports.
- List the parts that need to move independently (icon, wordmark, tagline, individual letters) and put each on its own named layer.
- Use Release to Layers (Sequence) where you need many sub-elements (e.g. each letter) and confirm the names are readable, not Layer 1, Layer 2.
- Expand strokes and live effects (Object then Expand) and outline the fonts (Type then Create Outlines), then state what changed.
- Remove stray, hidden, or empty layers and confirm the file is layered vector art, not a flattened raster image.
Worksheet: Composition Spec Sheet
Lock the delivery target before you animate, so resolution, frame rate, and duration trace back to where the logo will actually be used.
- Brand / logo name
- Primary destination (web overlay / broadcast / app splash / social)
- Resolution (e.g. 1920 x 1080)
- Frame rate (24 / 25 / 30 fps and why)
- Animation duration (seconds, target 3 to 5)
- End-hold length (seconds on the static logo)
- Background (transparent / brand colour / light or dark version)
- Import setting used (Composition - Retain Layer Sizes?)
- Layers converted to shapes via Create Shapes from Vector Layer? (Y/N)
Checklist: Project-Ready Pass
- The logo is layered vector art with the icon, wordmark, and tagline on separate named layers
- Strokes and effects are expanded and fonts are outlined in Illustrator
- I imported as Composition - Retain Layer Sizes, not as footage or a merged comp
- The comp is set to the real delivery resolution, frame rate, and duration
- I converted the artwork to shape layers and kept the original vectors as a backup
- Each layer's anchor point sits at a sensible pivot for scale and rotation
- The timeline is labelled and tidy, not a wall of unnamed layers
The Core Reveal Techniques
Build each reveal family in isolation, a trim-path draw-on, a clean shape morph, a particle build, and a masked wipe, then combine them into one sting.
Exercise: Trim-Path Draw-On Drill
Make a logo or icon draw itself on with a stroke. Give the path a stroke, turn the fill off for the reveal, add Trim Paths, and animate it, then cross-fade to the solid fill.
- Add Trim Paths to the shape layer and keyframe End from 0% to 100% so the stroke draws on over about a second.
- Set Trim Multiple Shapes to Individually or Simultaneously and note which suited your logo and why.
- Fix the draw direction or start point using path reverse or the Offset value if the line drew on wrong.
- Cross-fade or pop the solid fill in after the outline completes so the final frame is the real filled logo.
Worksheet: Reveal Technique Planner
Plan which reveal family carries each part of your logo before you animate, so the sting is choreographed on purpose. Fill one row per moving element.
- Element (icon / wordmark / tagline)
- Reveal family (trim-path / morph / particle / mask-wipe / scale-fade)
- Hero or supporting move?
- Start time (seconds into comp)
- Duration of the move (seconds)
- For a morph: do start and end paths have matching point counts? (Y/N)
- Lands exactly on the static logo? (Y/N)
Exercise: Shape Morph Point-Match Drill
Build one clean morph from a simple start shape to a logo element. Match the path point counts first, then keyframe the Path property and inspect the in-between frames.
- Make the start shape and end shape have the same number of vertices, adding or removing points so the counts match.
- Keyframe the Path property: first keyframe holds the start shape, second holds the end shape.
- Step through the in-between frames and describe any points that cross or twist, and how you reordered or moved them.
- Confirm the morph resolves on the correct logo element and is as low in point count as the shapes allow.
Checklist: Reveal Build Pass
- A trim-path reveal draws the stroke on from 0 to 100% and cross-fades to the solid fill
- Any morph has matching point counts on the start and end paths and interpolates cleanly
- Any particle build settles fully onto the clean logo, with dust or sparks faded out
- Mask wipes reveal type without distorting the artwork
- One clear hero move leads, with supporting moves staggered after it
- A finishing accent (shine, settle, tagline fade) punctuates the end
- The fully assembled, correct static logo is held still at the end
Timing, Easing, and Polish
Replace linear keyframes with eased, graph-shaped motion, add motion blur, overshoot, and anticipation, and land exactly on the brand-correct logo.
Exercise: Ease and Graph-Editor Drill
Take one robotic linear move and refine it. Apply Easy Ease, then open the graph editor and shape the speed curve toward a quick start and a long, soft settle.
- Select the keyframes and press F9 for Easy Ease, then note where you used Easy Ease In or Out only.
- Open the Graph Editor, switch to the Speed Graph, and describe the curve before and after you reshaped it.
- Drag the Bezier handles to flatten the approach so the logo decelerates gently into its final position.
- Confirm the whole move reads as one flowing gesture, not a series of jerks, and that the end settles rather than slams.
Worksheet: Polish Pass Worksheet
Record the physical touches you add and tune them to the brand's tone, since serious brands want restraint and playful brands take more bounce.
- Brand tone (corporate / playful / luxury / energetic)
- Motion blur enabled on fast-moving layers? (Y/N)
- Overshoot amount on the settle (small % and where)
- Anticipation used? (which element, how much)
- Follow-through / stagger (which secondary elements, how many frames behind)
- End-hold length on the finished logo (seconds)
- Does the polish suit the brand tone, or is it too bouncy / too flat?
Exercise: Brand-Correct Final Frame Check
Prove the last frame is the exact static logo. Compare your final hold frame against the brand's official artwork for colour, proportion, and clear space.
- Enter the brand's exact HEX or RGB colour values rather than eyeballing, and confirm they match the master.
- Confirm the logo is not stretched or squashed non-uniformly and proportions match the official mark.
- Check the clear space and alignment so the settled logo has the correct breathing room.
- Overlay or compare the final frame against the official logo file and list any drift you corrected.
Checklist: Motion Quality Pass
- No linear keyframes remain on visible moves; everything is eased
- Speed curves shaped in the graph editor toward a confident start and soft settle
- Motion blur is on for fast moves and renders in the comp
- Overshoot is small and suits the brand, not cartoonish
- Anticipation and follow-through used where they add energy, not everywhere
- The settle lands on a clear beat so a sound hit can be placed on it
- The final frame matches the official logo in colour, proportion, and clear space
- The finished logo is held still long enough to register before the animation ends
Exporting and Delivering the Animation
Render one pristine master, then derive a transparent WebM and optimised GIF for the web and a ProRes 4444 file for broadcast, and ship a clean delivery package.
Exercise: Render the Pristine Master
Render one high-quality master at full resolution with motion blur on and an alpha channel where transparency is needed, so every delivery file can be derived from it.
- Render at full resolution and the comp's true frame rate, with motion blur and all effects on.
- Choose a format and channel setting that includes alpha (RGB+Alpha) for a transparent logo.
- Decide your route: After Effects Render Queue (for ProRes via QuickTime) or Adobe Media Encoder, and say why.
- Watch the whole master once at full size and confirm the final frame lands on the correct static logo.
Worksheet: Per-Destination Export Plan
Plan the correct file for each place the logo will be used, derived from the one master. Fill one row per destination.
- Destination (website / email-chat / broadcast-editor / shareable video)
- Format (transparent WebM / GIF / ProRes 4444 / H.264 MP4)
- Transparency needed? (Y/N)
- Resolution to deliver at (full HD or scaled down)
- Frame rate to deliver at (full / reduced for GIF)
- Tool used to make it (Render Queue / Media Encoder / Photoshop / FFmpeg)
- Checked on a real test background? (Y/N)
Exercise: Web GIF and Transparent WebM Build
Produce both web deliverables from the master: a small, smooth GIF for universal use and a transparent WebM for modern web and apps.
- Make a GIF: keep it 2 to 4 seconds, reduce the frame rate (around 15 to 24 fps) and scale it down to display size.
- Handle GIF transparency honestly: match the matte to the background it will sit on, since GIF edges are hard.
- Make a transparent WebM (VP9 with alpha) and confirm it sits cleanly over a coloured test background.
- Compare the two: note the WebM's smaller size and clean edges versus the GIF's universal playback as a fallback.
Checklist: Final Delivery Gate
- One pristine master rendered at full resolution with motion blur on and alpha where needed
- Transparent WebM (VP9 + alpha) produced for modern web and checked over a coloured background
- Optimised GIF produced, short and scaled down, as the universal fallback
- ProRes 4444 with alpha rendered for broadcast or editing at the specified frame rate and resolution
- Frame rate and resolution match each destination's spec exactly
- Every file watched in full once, with the final frame on the correct static logo
- Files named clearly by brand, format, and spec
- A short note tells the client which file goes where
Your Action Plan
- Choose one logo and separate it in Illustrator into named vector layers (icon, wordmark, tagline), then expand strokes and outline fonts.
- Decide the delivery target and import as Composition - Retain Layer Sizes, building the comp at the right resolution, frame rate, and 3 to 5 second duration.
- Convert the artwork to shape layers and set sensible anchor points on each part.
- Build the hero reveal (for example a trim-path draw-on) and cross-fade it to the solid fill.
- Add a supporting reveal (a morph, particle build, or mask wipe) staggered after the hero move.
- Ease every visible move with F9 and shape the speed curves in the graph editor toward a soft settle.
- Add motion blur, a small overshoot, and any anticipation, tuned to the brand's tone, then hold the finished logo at the end.
- Confirm the final frame matches the official logo in exact colour, proportion, and clear space.
- Render one pristine master at full resolution with motion blur on and an alpha channel where needed.
- Derive a transparent WebM and an optimised GIF for the web and a ProRes 4444 with alpha for broadcast, name them clearly, and check each on a real background before hand-off.
Pairs well with
Courses members commonly take alongside this one.
Flagship CoursePreview
Freelance Business Foundations: Position, Price, Sell, and Deliver High-Value Services
Freelancing · Beginner · 16h
Self-pacedPreview
Client GrowthPreview
Freelance Client Acquisition: Outreach, Leads, Referrals, and Deal Flow
Freelancing · Beginner · 15h 30m
Self-pacedPreview
Sales SystemPreview
Freelance Sales & Proposals: Discovery Calls, Scoping, Objections, and Closing
Freelancing · Intermediate · 16h
Self-pacedPreview