The Loop That Actually Loops: Make an Animated Sticker in After Effects

The finished sticker bounces on a loop, looks clean at 512×512, and when you drop it in WhatsApp it keeps going indefinitely without a visible seam. That's what you're building. Nine steps. Step 5 is the one every YouTube tutorial skips over, and it's the exact reason your last loop had that tiny stutter at the repeat point.

By the end you'll have a looping animated sticker in Lottie format — the gold standard in 2026 — and an animated WebP backup for platforms that don't support Lottie yet. It won't be production-polished in 45 minutes. But the loop will work, and you'll understand exactly why.

Prerequisites

After Effects 2025 or 2026 (the August 2025 Multi-Frame Processing update helps). Bodymovin plugin — free from aescripts.com. Your sticker design as a vector: Illustrator AI, SVG, or AE shapes. Avoid raster PNG if you want clean Lottie export. 45–60 minutes.

Step 1 — Set up the composition at 512×512

Create a new composition. Set dimensions to 512px wide × 512px tall. Frame rate: 24fps. Duration: 2 seconds. 512×512 is the universal sticker canvas — WhatsApp, Telegram, Discord all expect it. If you start at 1080 and downscale later, you're asking for file-size trouble on export.

Common mistake: Starting at 1080×1080 "to have flexibility." You don't need flexibility — you need a 512 sticker. Start where you're ending.

Step 2 — Import your design (and keep it vector)

Import your Illustrator file via File > Import > as Composition. Or build shapes directly in AE using the shape layer tools. Hard rule: keep everything vector. Bodymovin can't export raster effects like Gaussian Blur or Drop Shadow into Lottie. They'll either vanish on export or turn your JSON into unworkable spaghetti.

Pro tip: If your design has raster effects in Illustrator, replace them with AE's native shape operations before animating. Outline Stroke, Merge Paths, and Trim Paths all export cleanly to Lottie — Gaussian Blur does not.

Step 3 — Animate one full cycle

Pick what moves: position, scale, rotation, or a combination. Set keyframes from frame 0 to frame 24 (one second at 24fps — that's your loop cycle). For a classic bounce: set Scale at 100% at frame 0, 120% at frame 12 (the peak), 100% at frame 24 (back to rest). Select all three keyframes, right-click, apply Easy Ease.

Common mistake: Only setting one keyframe and expecting the loop expression to handle the rest. It throws an error: "Not enough keyframes." You need minimum two.

Step 4 — Apply the loop expression

Alt-click (Option-click on Mac) the stopwatch icon next to the Scale property. A text input opens in the Timeline. Type: loopOut("cycle")

Done. The animation now plays past the end of your layer, repeating the same cycle forever. For a back-and-forth motion, use loopOut("pingpong") instead.

Pro tip: loopOut only loops forward from the last keyframe. If you also want the loop before your first keyframe, add loopIn("cycle") on the same property. Both expressions stack.

Step 5 — Fix the loop seam (the step that matters)

Preview the loop. There's a stutter at the repeat point, right? That bump. Open the Graph Editor (Shift+F3). Switch to Speed Graph view. At frame 24, the speed curve eases into zero — a slow stop. Then at frame 0, it eases out from zero — a slow start. Two slow moments back-to-back at the seam = visible stutter.

Fix: click the last keyframe's right handle in the Graph Editor. Drag it until the exit speed of frame 24 matches the entry speed of frame 0. When they're equal, the loop transitions at constant velocity and the seam disappears. This is the step every 5-minute YouTube tutorial skips.

Step 6 — Pre-compose and check transparency

Select all your sticker layers. Layer > Pre-compose (Shift+Cmd+C). Choose "Move all attributes." Name it STICKER_PRECOMP. In your main comp, make sure there's no solid or background layer underneath — you should see the checkerboard grid (transparent). Bodymovin reads the comp structure to export Lottie. A single pre-comp with clean alpha exports predictably.

Step 7 — Set the Work Area to exactly one cycle

The Work Area is the grey bar at the top of your timeline. Press B to mark the start at frame 0, press N to mark the end at frame 24. Bodymovin exports the Work Area, not the full comp duration. If your Work Area is 2 seconds but your cycle is 1 second, you'll export a 2-second file with a silent duplicate second half.

Step 8 — Export with Bodymovin

Window > Extensions > Bodymovin. Set Output Path. Under Renderer, choose SVG. Expand settings. Check the Loop checkbox. Hit Export. Drop the JSON into LottieFiles Preview. Does it loop without a seam? Clean alpha? You're done with the Lottie.

For WhatsApp WebP: Render a PNG sequence from AE (Render Queue, PNG sequence, channels: RGB+Alpha). Then: ffmpeg -i frame_%04d.png -loop 0 sticker.webp. Keep it under 500KB.

Step 9 — Test at 64px and 512px

Drop your Lottie into LottieFiles. Preview at small (64px) and full (512px). Complex details — thin strokes, small text, subtle shapes — collapse at emoji size. If something's unreadable at 64px: simplify one element, test again.

Pro tip: If you're making a sticker series, lock the character's silhouette and expression. Consistent recognizability across sizes is what makes a sticker set feel like a set, not a folder of unrelated files.

If you get stuck

"Not enough keyframes to loop" — you have one keyframe. Add a second. Loop seam still visible after Graph Editor fix — you edited the Value Graph, not the Speed Graph. Switch views and redo the handle match. Bodymovin JSON is 1MB+ — you have raster effects somewhere. Trace back to Step 2 and replace with AE shape operations. WhatsApp rejects the sticker — file size exceeds 500KB, or it's not exactly 512×512.

Next Monday: Illustrator’s Appearance panel — the hidden layer stack that lets you build multi-stroke type without touching the Layers panel.