Mask Animation

Mask animation reveals a logo by sliding or expanding a shape that uncovers the mark like an aperture in motion. All the complexity lives in the mask path leaving the logo vectors untouched which makes the pattern portable across Lottie WebM MP4 and every size from 24px loaders to 4k video. The aperture can be a hard rectangle for a left to right wipe a growing circle for an iris effect or a custom bezier contour that dances around letterforms. Because the logo never moves or draws the technique survives export to different formats without breaking. It works in React apps as a progress spinner on marketing sites as ambient background presence and in video editors as a scene connector. The mask carries the personality through its speed and easing while the brand mark stays crisp at rest.

What it is at its core is an editorial device lifted from film title sequences and sharpened for digital production. Saul Bass used similar reveals in the 1950s to open movies with precision. Modern teams adapt the same idea for brand systems where the mask acts as infrastructure rather than decoration. You build it once in After Effects by setting a shape layer as an alpha matte then keyframe its position scale or path points. The result lands exactly on the approved still frame every time. This matters because that still frame is what users see when autoplay fails or Lottie refuses to load on a slow network. Mask animation ignores the internal construction of the logo so it handles dense serifs custom ligatures and overlapping elements that would choke a draw pattern. It sits in the middle of the six patterns in complexity lighter than rigs or particles heavier than basic reveals yet it scales across the four required modes without forcing redesigns.

What it is not keeps teams from misapplying it and creating generic assets. Mask animation is not a draw pattern that traces live strokes like an invisible hand sketching the mark in sequence. Draw needs clean line geometry and dies on solid filled wordmarks. Mask works on anything. It is not a reveal that scales or fades the entire logo as one object with simple easing. Reveal is faster to produce but lacks directional intent. It is not particle animation that bursts the mark into flying dots before they reassemble. Particles look expensive and inflate file size. Mask stays under 50KB. It is not rigging with joints and secondary motion for character logos that need personality through overlap and follow through. Mask flattens those elements into a flat wipe. It is also not a slow cinematic flourish that lingers past one second. That turns it into a dated slide transition from 2008 PowerPoint decks. Clear boundaries like these prevent portfolios full of impressive but unusable hero clips that break the moment they hit production.

Concrete example hits hardest with Stripe in 2021. Their condensed purple wordmark resists clean drawing so they built a vertical pill shaped mask that expands symmetrically from center in 1.4 seconds. The custom ease out snaps into place with a micro overshoot that feels alive yet professional. This single asset runs as their checkout loader in React as a transition between payment states and as the opener for explainer videos. The Lottie JSON weighs 27KB the WebM version autoplays on their marketing site and the PNG still frame serves as fallback for email clients. Linear copied the discipline in 2023 for command bar transitions. A crisp horizontal mask wipes their logotype in 0.75 seconds with an ease that matches their fast product tempo. It collapses cleanly to the static mark and loops without visible seams in dashboard corners. Apple Music deployed a layered mask sequence in 2022 where a circular aperture blooms to reveal color bands before settling on the final black logo synced to their audio stinger. The same master file shipped as Lottie for iOS splash screens WebM for website heroes and MP4 for social reels. The New York Times used a baseline following wave mask in their 2020 mobile redesign to reveal their serif masthead at 32px without aliasing. Dropbox in 2019 applied a box shaped mask that slides across their wordmark creating hierarchy by revealing icon first then text. These named executions share tight budgets strong documented easing and zero tolerance for anything that fails at small sizes.

When to use mask animation starts with your static mark geometry. Grab it for filled wordmarks complex lockups or logos with fine detail that would fight stroke based drawing. It earns its place in loaders because it renders cheap loops seamlessly and maintains clarity at 24px where most patterns collapse. Deploy it for transitions between dark and light modes or between product screens since the mask reverses cleanly without new assets. The pattern shines when your delivery list includes Lottie because the path data compresses better than rigged joints or particle systems. Use it in ambient loops on populated web pages where the motion needs to stay present but never distracting. Brands like IBM and The Guardian chose it for heritage marks that demand deliberate tempo rather than flashy construction stories. Always design the still frame first then drive the mask to land on it with precision. Include exact mask preferences in the one page motion brief along with reference clips from Stripe and Linear plus a clear what to avoid list that bans slow wipes and clever distractions.

When not to use it protects the larger motion system from bloat. Skip mask on simple geometric marks built from circles and triangles where draw or build patterns communicate construction honestly and feel more native. Never apply it to character mascots like Mailchimp Freddie or the pre 2023 Twitter bird. Those deserve rigging that animates individual parts with life and overlap. Avoid it in premium large screen intros where particle systems or builds can deliver spectacle that matches the budget and canvas. Do not reach for it if the brand story lives in how the mark was made. Mask hides process instead of showing it. Never let duration exceed one second for standard modes or the animation starts reading like a tired editorial transition instead of sharp brand infrastructure. If your system already covers reveal and draw across all four modes then mask becomes redundant unless it specifically solves a file size or format problem. Test every version at 24px 48px and full hero scale before signoff. If edges alias or timing feels off simplify the aperture before you ship.

Technical execution details separate good mask animations from ones that break in production. In After Effects 2024 build the mask on a shape layer with minimal vertices then parent it as an alpha matte. Use transform keyframes for basic wipes or animate the path points for custom shapes. Replace default easing with a custom cubic bezier that adds anticipation at the start and a confident settle at the end. Keep feather values between 0 and 4 pixels depending on brand voice. For Lottie export run the Bodymovin plugin and compress to under 50KB by avoiding unnecessary keyframes. Document the exact timing easing values and still frame coordinates in the motion system guide so any future artist can match the language without a discovery call. Build bidirectional versions from day one so the same asset works for both reveal and hide states. These steps turn mask animation from a one off trick into repeatable infrastructure that survives platform updates and team changes.

Common failures show up predictably and fix fast when caught early. The slowest mask that takes 2.5 seconds to reveal reads like a loading bar instead of brand presence. Cut the duration and sharpen the ease. A mask shape that fights the logo proportions creates awkward timing where some letters appear too early. Match the aperture aspect ratio to the mark bounding box on the first round. Teams often forget the loop seam in ambient modes so the animation stutters on repeat. Set identical keyframes at frame zero and the final frame to eliminate it. The worst failure is delivering motion without a bulletproof still frame PNG. When Lottie fails or autoplay blocks the fallback must look intentional not half revealed. Design for zero motion first then layer the mask on top.

A well executed mask animation disappears into the brand experience leaving only the memory of a confident and precise logo reveal.