Motion graphics with After Effects

In short

Motion graphics is design in motion — type, shapes, logos, icons, charts and photographs animated over time, as distinct from character animation. Adobe After Effects is the industry-standard compositing and motion-design tool: a layer-based timeline where every property can be keyframed, driven by expressions, nested into precomps and composited with effects, mattes and 3D cameras. It matters because almost every Indian studio deliverable — a broadcast lower third for Star or Zee, an explainer for Unacademy or Physics Wallah, a product film for Flipkart, an OTT title sequence, a UI animation exported as Lottie — passes through it. Universities examine it in the 2D/motion papers of B.Sc Animation and B.Des courses, usually as composition settings, interpolation theory, matte and keying workflow, and render/delivery specifications. Placement tests are practical: a 10-second animated lower third or logo reveal in a timed studio round, plus a showreel built from exactly this skill.

Explained

How After Effects is organised

• Project (.aep): a reference file. It stores pointers to footage on disk, not the footage — move the media and layers go "missing" (colour-bar placeholders).
• Footage → Composition → Layer → Property → Keyframe is the hierarchy. A composition (comp) has its own size, pixel aspect ratio, frame rate, duration and background.
• Layer types: footage, solid, shape layer, text, camera, light, null object, adjustment layer, and precomposition (a comp used as a layer).
• Adjustment layer: applies its effects to every layer below it in the same comp — one Curves or Glow for the whole stack.
• Null object: an invisible layer used only as a parent/controller; it renders nothing.
• Precomposing (Ctrl+Shift+C): groups selected layers into a nested comp — used to re-order render operations, reuse an element, and to apply one transform to a group. "Collapse Transformations / Continuously Rasterize" passes the precomp's resolution and 3D space through instead of flattening it.
• Render order inside a layer: Masks → Effects → Transform. This is why a Gaussian Blur applied to a scaled layer blurs *before* scaling, and why a transform you want blurred must be moved into a precomp.
• Panels examined: Project, Composition (viewer), Timeline, Effect Controls, Graph Editor, Render Queue, Essential Graphics, Preview.

Composition settings, time and frame rate

• Resolution: HD 1920×1080, UHD/4K UHD 3840×2160, DCI 4K 4096×2160, square 1080×1080 and vertical 1080×1920 for social.
• Pixel aspect ratio (PAR): 1.0 for all HD/UHD work. Legacy SD/HDV footage has non-square pixels; frame aspect = (width/height) × PAR.
• Frame rate: 24 fps for film and most OTT, 25 fps for Indian television (PAL-legacy 50 Hz broadcast), 30/29.97 fps for some web and NTSC-derived delivery, 50/60 fps for sport and smooth UI motion. Comp frame rate is independent of footage frame rate — footage is conformed by its "Interpret Footage" setting.
• Timecode is SMPTE HH:MM:SS:FF, frames counted from 00. Drop-frame timecode (semicolons) exists only for 29.97/59.94 fps; 25 fps Indian broadcast is non-drop.
• Duration: always an integer number of frames. A design must be cut to frames, not to decimals.
• Time stretch (percentage) changes a layer's whole duration; Time Remapping keyframes time itself, allowing freezes, ramps and reverses. Frame Blending (Frame Mix or Pixel Motion) smooths stretched footage; Motion Blur (shutter angle and shutter phase in Comp Settings → Advanced) blurs fast movement.
• Interlaced source must be separated into fields on import and can be rendered back to fields for broadcast; web and OTT delivery is progressive.
• Colour: Rec.709 for HD, Rec.2020/HDR for UHD deliverables, sRGB for web. Working in 16 bpc or 32 bpc float with "Linearize Working Space" avoids banding in gradients and glows; 8 bpc is the default and the usual cause of banded skies.

Keyframes, interpolation and the Graph Editor

• Transform properties (every layer): Anchor Point, Position, Scale, Rotation, Opacity — plus Orientation and X/Y/Z rotation when 3D is enabled. The anchor point is the pivot for scale and rotation; most "wrong rotation" problems are an off-centre anchor.
• Keyframe = a value pinned to a time. Between two keyframes After Effects interpolates.
• Temporal interpolation (how value changes over time) vs spatial interpolation (the shape of the motion path in the Composition viewer). They are set separately.
• Interpolation types: Linear (constant rate, mechanical), Bezier (hand-shaped handles), Continuous Bezier (smooth through the keyframe), Auto Bezier, Hold (steps, no interpolation — used for stop-motion/typing effects).
• Easy Ease (F9), Ease In (Shift+F9), Ease Out (Ctrl+Shift+F9) set velocity to zero at the keyframe; the Graph Editor then shapes the curve.
• Graph Editor, two graphs: the value graph (property value vs time) and the speed graph (rate of change vs time). Position of a 2D/3D layer shows a speed graph only.
• Roving keyframes: middle keyframes freed from fixed times so speed stays even along a path — used for camera moves along a motion path.
• Motion-design practice applied to graphs: anticipation, overshoot and settle, follow-through (offsetting child layers a few frames), squash and stretch on logos, and arcs instead of straight lines.
• Keyframe shortcuts: U reveals all animated properties; J/K jump between keyframes; Alt+] trims the out point; Ctrl+Shift+D splits a layer.

Building elements: shapes, text, masks and mattes

• Shape layers are vector and resolution-independent: Path, Fill, Stroke, plus path operations — Trim Paths (the standard line-draw/stroke-on animation), Repeater (arrays), Offset Paths, Wiggle Paths, Round Corners, Merge Paths, Twist, Zig Zag.
• Trim Paths uses Start and End (0–100%) plus Offset (an angle in degrees, which rotates where the trimmed segment begins); animating End 0→100 draws a stroke on.
• Text layers: per-character 3D, and Text Animators with a Range Selector (Start/End/Offset, Units: % or Index, Shape, Smoothness) or a Wiggly Selector — this is how kinetic typography is built rather than keyframing letters by hand. Source Text can be keyframed (it holds, never interpolates).
• Masks (drawn on a layer) with modes Add, Subtract, Intersect, Lighten, Darken, Difference, plus Mask Feather, Mask Expansion, variable-width Mask Feather tool, and Mask Path keyframing for rotoscoping.
• Track mattes: the layer directly above acts as the matte — Alpha Matte, Alpha Inverted, Luma Matte, Luma Inverted; the matte layer's video switch is turned off automatically. The Set Matte effect borrows a matte from any layer, at any point in the effect chain.
• Alpha channels: straight (colour unaffected by alpha) vs premultiplied (colour already multiplied by alpha against a background). Mis-labelled premultiplied footage gives dark or white fringes — fix in Interpret Footage, not with a blur.
• Blending modes (Add, Screen, Multiply, Overlay, Linear Dodge) and Preserve Transparency for light wraps and glows.
• Parenting (the pick-whip) makes a child inherit the parent's transform — parent rigs, null-driven camera moves and solar-system style hierarchies; parenting does not inherit opacity or effects.

Effects, 3D, tracking and expressions

• Core effects examined: Gaussian/Camera Lens Blur, Glow, Curves, Levels, Hue/Saturation, Tint, Fill, Fractal Noise, Turbulent Displace, Gradient Ramp, Displacement Map, CC Particle World, Echo, Posterize Time, Timewarp, Mosaic.
• Keying: Keylight for green/blue screen (screen colour, screen gain/balance, screen matte clip black/white), with Advanced Spill Suppressor and a garbage mask. Roto Brush with Refine Edge for rotoscoping without a greenscreen; Content-Aware Fill for rig and wire removal.
• Puppet tool (Deform, Starch, Overlap pins; Advanced/Bend mode) for mesh-based warping of flat artwork — the usual way a 2D illustration is given limb motion in a motion-graphics job.
• 3D: 3D layers live in Z space with Cameras (Zoom, Focal Length, Depth of Field, Aperture, Blur Level), Lights (Parallel, Spot, Point, Ambient) and layer Material Options (Casts Shadows, Accepts Lights, Ambient/Diffuse/Specular). The Cinema 4D / Advanced 3D renderer adds extrusion and bevel; the Classic renderer does not.
• Tracking: Track Motion (Position, Rotation, Scale, Perspective corner-pin) with attach points; Stabilize Motion and the Warp Stabilizer for shake; the 3D Camera Tracker solves a camera from footage to insert 3D elements; Mocha AE is a planar tracker for surfaces and screen replacements.
• Expressions (JavaScript) replace keyframes with rules — examined terms:
  • wiggle(freq, amp) — organic jitter; time — the current comp time in seconds; index — the layer's number, used to offset a stack; value — the property's own value.
  • loopOut("cycle"), loopOut("pingpong"), loopOut("offset") — loop keyframes forever.
  • linear(t, tMin, tMax, v1, v2) and ease() — remap one value range to another; valueAtTime(t), thisComp.layer("X").transform.position for cross-layer links.
  • posterizeTime(n) — holds the animation on n fps for a stepped, hand-drawn feel.
  • Expression Controls (Slider, Angle, Checkbox, Colour, Point) expose a single control for a whole rig.
• Essential Graphics panel: exposes chosen properties and master styles, saves as a Motion Graphics template (.mogrt) that a Premiere Pro editor can retime and re-text without opening After Effects — the standard studio handoff for lower thirds and title packs.
• Lottie/Bodymovin: exports shape-and-transform animation as a small JSON played natively in Android, iOS and web apps — used for app loaders and onboarding animations. It supports only vector shapes, transforms and limited effects; no rasters or blurs.

Rendering, codecs and delivery

• Two routes: the internal Render Queue (for lossless/intermediate formats) and Adobe Media Encoder (queued, for H.264/H.265 and preset-based delivery). Composition → Add to Render Queue, or Add to AME Queue.
• Output modules: QuickTime with Apple ProRes 422/4444, Animation or Lossless with Alpha (RGB+Alpha) for a master or for an element that must carry transparency; PNG/TIFF/EXR/DPX image sequences for a VFX pipeline (one corrupt frame costs one frame, not the whole render); H.264 (.mp4) for client review and online delivery.
• Alpha cannot survive H.264/MP4 — a transparent element must go out as ProRes 4444, Animation, or a PNG/EXR sequence.
• Performance: multi-frame rendering uses all cores; disk cache and RAM preview store rendered frames (purge when memory runs out); proxies and reduced preview resolution (Half/Third) speed up design work; Draft 3D and the "Fast Previews" setting disable shadows and depth of field while working.
• Handoff: File → Dependencies → Collect Files gathers the project and all footage into one folder — the examinable answer for portability; "Reduce Project" and "Remove Unused Footage" trim it.
• Indian practice and legal notes: broadcast masters for Indian channels are commonly 1080i/1080p at 25 fps with 2-pop/bars-and-tone slates to the channel's own spec sheet; OTT platforms publish their own delivery specs (ProRes masters, separate textless and localisation deliverables). Licensing of music, stock footage and fonts is governed by the Copyright Act, 1957 (as amended) — a studio must hold a licence for the track and the stock, and the author/first-owner question for commissioned work is decided by the contract. Software is a subscription priced in rupees with 18% GST; animation and post-production services billed to Indian clients are also taxed under GST at 18%. Studios signing NDAs for OTT and game work typically must satisfy content-security audits (TPN-type programmes are voluntary industry schemes, not statutory).

Key points

• Composition — a container with its own size, PAR, frame rate and duration; the unit of work and of rendering.
• Precomp — a comp nested as a layer; used to reuse elements, group transforms and change render order.
• Render order — Masks, then Effects, then Transform, inside each layer; precomp to break it.
• Anchor point — the pivot for scale and rotation; move it, don't fight the result with position keys.
• Linear vs Bezier interpolation — constant rate vs shaped velocity; Easy Ease (F9) zeroes velocity at the keyframe.
• Value graph vs speed graph — value over time vs rate of change; speed graph only for spatial properties.
• Spatial vs temporal interpolation — the path's shape vs the timing along it, set separately.
• Hold keyframe — steps with no interpolation; the basis of stepped, limited-animation looks.
• Trim Paths — animates stroke Start/End/Offset; the standard line-draw technique on shape layers.
• Text Animator + Range Selector — animates type per character or word without per-letter keyframes.
• Track matte — the layer immediately above cuts the layer below by its alpha or luma.
• Straight vs premultiplied alpha — fix fringing in Interpret Footage, not with effects.
• Null + parenting — one controller drives a hierarchy; opacity and effects are not inherited.
• Motion blur — shutter angle (180° ≈ film) and shutter phase; essential realism for fast moves.
• Expressions — wiggle, loopOut, time, index, linear, valueAtTime, posterizeTime replace keyframe labour.
• Mogrt — Essential Graphics template an editor retimes in Premiere Pro.
• Alpha needs ProRes 4444 / Animation / PNG or EXR sequence — never H.264.
• Collect Files — the portable handoff; a .aep alone carries no media.

Formulas and examples

Example 1 — frames and timecode. A comp runs 8 s at 24 fps → N = 8 × 24 = 192 frames (last frame is 191, timecode 00:00:07:23). The same 8 s at 25 fps = 200 frames. Frame 3787 in a 25 fps comp: 3787 / 25 = 151.48 s → 151 s = 2 min 31 s, and 0.48 × 25 = 12 frames → 00:02:31:12.

Example 2 — speed and motion blur. A logo slides 1920 px across the frame in 40 frames at 24 fps.

• Δtime = 40 / 24 = 1.667 s → v = 1920 / 1.667 = 1152 px/s.
• At a 180° shutter, exposure = 180 / (360 × 24) = 1/48 s = 0.02083 s.
• Streak ≈ 1152 × 0.02083 ≈ 24 px of blur per frame — visible, so motion blur must be on.
• At 360° shutter the exposure doubles to 1/24 s and the streak is 48 px.

Example 3 — linear interpolation and easing. Opacity keyframed 0% at frame 0 and 100% at frame 30, linear. At frame 12: 0 + (100 − 0) × 12/30 = 40%. With Easy Ease on both keyframes the same frame reads roughly 35% (default 33% influence gives 3t² − 2t³ = 0.352 at t = 0.4; the exact figure depends on the Bezier handles) — proof that easing changes the value at a time, not the end points.

Example 4 — scale, data rate and RAM preview. A 1920×1080 comp at 25 fps, 8 bpc with alpha.

• Frame size = 1920 × 1080 × 4 bytes = 8,294,400 bytes ≈ 7.91 MiB.
• Uncompressed data rate = 8,294,400 × 25 = 207,360,000 bytes/s ≈ 207.4 MB/s; a 30 s uncompressed master ≈ 6.22 GB.
• RAM preview with 16 GiB (17,179,869,184 bytes) available: 17,179,869,184 / 8,294,400 ≈ 2,071 frames ≈ 82.8 s at full resolution; at Half resolution each frame is a quarter of the size, so about 8,286 frames.
• A 500 px-wide logo filling the 1920 px frame needs scale = 1920/500 × 100 = 384% — fine for a shape or vector layer with continuous rasterisation, soft for a raster PNG.

Example 5 — time stretch and render budget. A 6 s (150 frames at 25 fps) element given 250% time stretch becomes 150 × 2.5 = 375 frames = 15 s, playing at 100/250 = 40% speed; Frame Blending or Pixel Motion is needed or it will judder. Rendering 1,500 frames at an average 2.4 s per frame takes 1,500 × 2.4 = 3,600 s = 1 hour; halving preview resolution does not reduce the final render, but multi-frame rendering across cores does.

Where it is used

• Broadcast and OTT: channel idents, lower thirds, tickers and title packs for Star, Zee, Sony, Colors and news channels; title sequences and promos for OTT originals.
• Advertising and digital marketing: product explainers and 6/15/30-second social cutdowns for e-commerce and D2C brands; agency motion-design posts in Mumbai, Delhi NCR, Bengaluru, Pune and Hyderabad.
• EdTech and e-learning: animated lesson and concept videos at Unacademy, Physics Wallah, Vedantu and corporate L&D teams (Byju's, once the biggest buyer, went into insolvency proceedings and is no longer hiring at scale) — collectively the largest volume employer of junior motion designers in India.
• VFX and post houses: DNEG, Prime Focus, Red Chillies VFX, Framestore, Basilic Fly and Phantom FX use (MPC and the rest of the Technicolor group ceased operations in 2025) After Effects for cleanup, rotoscoping, screen replacements, 2D comp and matte painting integration alongside Nuke.
• Games and apps: UI/UX motion, HUD elements and store trailers; Lottie animations shipped into Android/iOS products by product design teams.
• Job roles: Motion Graphics Artist, Compositor, 2D VFX artist, Roto/Paint artist, Title designer, UI motion designer, Video editor-animator; freelance studio work billed per deliverable with 18% GST.

Interview questions

• Q: What is the difference between a composition and a precomposition? A: A composition is a container with its own settings and timeline; a precomposition is simply a composition used as a layer inside another, which lets you reuse it, transform the group as one, and change render order.
• Q: In what order does After Effects render a layer? A: Masks first, then effects, then transforms — so to blur a scaled or rotated result you must precompose the layer and blur the precomp.
• Q: What does the Graph Editor's speed graph tell you that the value graph does not? A: It shows the rate of change, so you can see acceleration, deceleration and constant-velocity sections and make motion read naturally rather than mechanically.
• Q: Difference between spatial and temporal interpolation? A: Spatial interpolation is the shape of the motion path in space; temporal interpolation is the timing of values along it. A smooth curved path can still have ugly linear timing.
• Q: How would you animate a line drawing itself on? A: Add the stroke on a shape layer and animate Trim Paths End from 0% to 100%, easing the ends, with Offset if the start point must travel.
• Q: What is a track matte and when would you prefer a mask? A: A track matte uses the layer immediately above to cut the layer below by its alpha or luma — good for reusable, animated or footage-based mattes; a mask is drawn on the layer itself and is better for a quick one-off shape or garbage matte.
• Q: Your green-screen edges look black-fringed after keying. Why? A: Usually the alpha interpretation is wrong (premultiplied footage read as straight or vice versa) or spill was not suppressed — fix it in Interpret Footage and with the Advanced Spill Suppressor, not with a blur.
• Q: Why does your MP4 export lose transparency? A: H.264 in an MP4 container carries no alpha channel; export ProRes 4444, QuickTime Animation, or a PNG/EXR sequence instead.
• Q: What does loopOut("pingpong") do, and where would you use it? A: It repeats the layer's keyframes forward and backward forever after the last keyframe — used for idle loops, blinking elements and breathing backgrounds without duplicating keyframes.
• Q: What is shutter angle and what value do you use? A: It is the exposure fraction of each frame used for motion blur; 180° (1/48 s at 24 fps) matches the film look, higher values give longer streaks.
• Q: How do you hand an animated lower third to an editor who does not use After Effects? A: Expose the text, colour and duration in the Essential Graphics panel and export a .mogrt motion graphics template that they open and edit in Premiere Pro.
• Q: The client asks for the same animation inside their mobile app, under 100 KB. What do you do? A: Rebuild it with shape layers and transforms only and export Lottie JSON via Bodymovin — no rasters, blurs or unsupported effects.
• Q: How do you move a project to another machine without missing footage? A: File → Dependencies → Collect Files, which copies the project and all referenced media into one folder with a report.

Common mistakes

• Leaving the anchor point at the default and then fighting the rotation or scale with extra Position keyframes.
• Using linear keyframes everywhere, so motion looks mechanical; or easing everything, so nothing has weight or snap.
• Forgetting motion blur on fast moves, and forgetting to turn off the Draft 3D / low-resolution preview before the final render.
• Expecting a blur or glow applied to a layer to affect its scaled or rotated result, instead of precomposing.
• Scaling a small raster logo above 100% and calling it sharp; shape/vector layers with continuous rasterisation are the fix.
• Exporting with alpha into H.264, or delivering a 25 fps master for a 24 fps spec, then wondering why the duration drifts.
• Working in 8 bpc and delivering banded gradients and glows; also mixing colour spaces without checking Rec.709 vs sRGB.
• Handing over a .aep only, with no Collect Files, so every layer opens as a missing-footage placeholder.

Related topics

2D animation: traditional and digital · Design software: Adobe tools · Compositing and keying in Nuke · Video editing and post-production workflow · Typography and layout for screen · 3D animation and rendering basics