Logo & shape animation with Lottie export
Animate vector logos and export Lottie that plays correctly.
20 project-authored proposals · taxonomy v1.1 · 0 new benchmark runs. Verifiers and partial-credit rules below are designs, not executed results.
- Typical applications
- After Effects · Bodymovin · Rive
- Class GUI-need label
HY· Hybrid
Task proposals · 20
Expand to inspect the complete original wording and proposed checks. Original proposal text remains English in both interfaces.
R06.05.01.03-T01 Draw on an SVG logo with trim paths and export Lottie
Original instruction
In After Effects, import input/logo.svg as shape layers (Create Shapes from Vector Layer) in a 512×512, 60 fps comp. Reveal all strokes with Trim Paths from 0% to 100% over 1.5 s with ease-out, then hold to 2 s. Export Lottie with Bodymovin to out/logo_draw.json (op = 120).
- Platforms
mac· macOSwin· Windows- Applications
- After Effects · Bodymovin
- Interfaces
desk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
path· Continuous pathclick· Point & clickgeom· Precise geometry- Work product
WP05· Time-based media- Conditions
licensed· Licensed pro app- Proposed difficulty
- 3 / 5
Proposed verifier
JSON: fr = 60, op = 120, w/h = 512, only shape layers (no image assets), trim-path ('tm') items present. Render with lottie-web via headless browser: frame 90 matches the static logo (SSIM ≥ 0.97); stroke coverage monotonic from 0 to 100% over frames 0–90 with ease-out.
Proposed partial credit
25% JSON header spec; 15% vector-only; 35% draw-on progression; 25% final frame matches logo.
R06.05.01.03-T02 Morph one icon into another with matched vertices
Original instruction
In After Effects (512×512, 30 fps), morph input/icon_play.svg into input/icon_pause.svg over 20 frames by keyframing a single path per shape with equal vertex counts and sensible first-vertex alignment (no twisting). Export Lottie to out/play_pause.json.
- Platforms
mac· macOSwin· Windows- Applications
- After Effects · Bodymovin
- Interfaces
desk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
path· Continuous pathgeom· Precise geometryvis· Visual judgment- Work product
WP05· Time-based media- Conditions
licensed· Licensed pro app- Proposed difficulty
- 4 / 5
Proposed verifier
JSON: path keyframes ('ks' with 2+ keys) whose start/end vertex counts match; lottie-web render: frame 0 IoU ≥ 0.97 with play icon, frame 20 IoU ≥ 0.97 with pause icon; intermediate frames have no self-intersections (polygon validity) and area changes monotonically.
Proposed partial credit
30% start/end shapes; 25% equal vertex counts; 30% no twisting/self-intersection; 15% export spec.
R06.05.01.03-T03 Make a looping Telegram sticker under 64 KB
Original instruction
Animate the mascot in input/mascot.ai (After Effects, 512×512, 60 fps, 3 s) waving its arm in a seamless loop, and export with Bodymovin as Lottie, then convert to Telegram .tgs at out/wave.tgs (gzip). Constraints: ≤ 64 KB, ≤ 3 s, no raster images, no unsupported effects.
- Platforms
mac· macOSwin· Windows- Applications
- After Effects · Bodymovin
- Interfaces
desk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
geom· Precise geometrypath· Continuous pathvis· Visual judgment- Work product
WP05· Time-based media- Conditions
licensed· Licensed pro app- Proposed difficulty
- 3 / 5
Proposed verifier
File ≤ 65,536 bytes, valid gzip Lottie, 512×512, fr 60, op ≤ 180, no image assets or expressions; rlottie render: arm (GT region) moves (≥ 15° rotation range) and frame 0 vs final+1 SSIM ≥ 0.98 (seamless loop).
Proposed partial credit
30% size and format limits; 20% vector-only/no expressions; 25% wave motion; 25% seamless loop.
R06.05.01.03-T04 Build an interactive Rive button with a state machine
Original instruction
In the Rive editor, from input/button.svg build an artboard 'Button' with animations Idle, Hover (scale 1.05, 150 ms) and Press (scale 0.95 + color #1D4ED8), a state machine 'ButtonSM' with Boolean input 'isHover' and Trigger 'press', and export out/button.riv.
- Platforms
web· Any OS (web)mac· macOSwin· Windows- Applications
- Rive
- Interfaces
brow· Browserdesk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickdrag· Drag & dropgeom· Precise geometry- Work product
WP05· Time-based media- Conditions
- None declared
- Proposed difficulty
- 4 / 5
Proposed verifier
Rive runtime test harness: state machine 'ButtonSM' exists with inputs isHover (bool) and press (trigger); setting isHover true → rendered scale 1.05 ± 0.01 after 150 ms; firing press → scale 0.95 and fill ΔE2000 ≤ 2 to #1D4ED8; returns to idle.
Proposed partial credit
25% animations exist; 25% inputs defined; 35% runtime behavior; 15% export valid.
R06.05.01.03-T05 Create a seamless loading spinner Lottie under 20 KB
Original instruction
In After Effects, create a 200×200, 60 fps spinner: an arc with trim paths whose length oscillates while the whole arc rotates 360° per second, looping seamlessly over 2 s. Export out/spinner.json with Bodymovin, ≤ 20 KB, no expressions.
- Platforms
mac· macOSwin· Windows- Applications
- After Effects · Bodymovin
- Interfaces
desk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
geom· Precise geometryclick· Point & click- Work product
WP05· Time-based media- Conditions
licensed· Licensed pro app- Proposed difficulty
- 2 / 5
Proposed verifier
JSON ≤ 20,480 bytes, fr 60, op 120, no 'x' expression fields; lottie-web render: arc angle advances 360° ± 5° per 60 frames; arc length varies ≥ 30%; frame 0 equals frame 120 (SSIM ≥ 0.99).
Proposed partial credit
25% size/no expressions; 25% rotation rate; 25% length oscillation; 25% seamless loop.
R06.05.01.03-T06 Make an AE logo animation render identically as Lottie
Original instruction
fixtures/logo_fx.aep uses features Lottie renders poorly (Gaussian Blur, Merge Paths, expressions, a luma matte). Rework it so the Bodymovin export out/logo_fx.json looks like the AE render in lottie-web and lottie-android (SSIM ≥ 0.95 per frame vs input/ae_reference.mp4) while keeping duration and timing.
- Platforms
mac· macOSwin· Windows- Applications
- After Effects · Bodymovin
- Interfaces
desk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
HY· Hybrid- Interaction primitives
geom· Precise geometrypath· Continuous pathvis· Visual judgment- Work product
WP05· Time-based media- Conditions
licensed· Licensed pro applong· Long-horizon- Proposed difficulty
- 5 / 5
Proposed verifier
Render JSON in lottie-web (headless Chrome) and lottie-android (emulator harness): mean per-frame SSIM ≥ 0.95 and min ≥ 0.9 vs reference in both; JSON contains no expressions or merge-path items; same op and fr as reference.
Proposed partial credit
40% lottie-web parity; 35% lottie-android parity; 15% unsupported features removed; 10% timing preserved.
R06.05.01.03-T07 Export a title animation with text converted to shapes
Original instruction
In After Effects comp 'Hello' (fixtures/hello.aep), the animated text uses a licensed font. Convert the text to shape layers (Create Shapes from Text) keeping the per-letter animation, and export out/hello.json so it renders without the font installed.
- Platforms
mac· macOSwin· Windows- Applications
- After Effects · Bodymovin
- Interfaces
desk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clickvis· Visual judgment- Work product
WP05· Time-based media- Conditions
licensed· Licensed pro app- Proposed difficulty
- 3 / 5
Proposed verifier
JSON: no text layers (ty 5) and no 'fonts' list; lottie-web render on a machine without the font: per-frame SSIM ≥ 0.95 vs the AE reference render; per-letter animation timing preserved (letter-box onset within 1 frame).
Proposed partial credit
35% no text/font dependency; 45% visual parity; 20% per-letter timing.
R06.05.01.03-T08 Recolor and retime a Lottie in the LottieFiles editor
Original instruction
In the LottieFiles web editor (test account), open input/success_check.json, replace its 4 colors with the brand palette in input/palette.json (map by role: primary, accent, background, stroke), set playback speed to 1.5× by changing frame rate or timing, and export out/success_brand.lottie (dotLottie).
- Platforms
web· Any OS (web)- Applications
- LottieFiles
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
click· Point & clicktype· Text & forms- Work product
WP05· Time-based media- Conditions
- None declared
- Proposed difficulty
- 2 / 5
Proposed verifier
Unzip .lottie: animation JSON colors equal palette by role (exact RGB); duration = original / 1.5 (± 1 frame); render frames otherwise match recolored reference (SSIM ≥ 0.97).
Proposed partial credit
50% colors mapped by role; 30% speed change; 20% valid dotLottie.
R06.05.01.03-T09 Export a Lottie with intro, loop and outro markers
Original instruction
In After Effects comp 'Toggle' (fixtures/toggle.aep, 60 frames), add comp markers named 'intro' (0–20), 'loop' (20–40) and 'outro' (40–60) with durations, and export out/toggle.json so that an app can play the named segments.
- Platforms
mac· macOSwin· Windows- Applications
- After Effects · Bodymovin
- Interfaces
desk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
click· Point & clicktype· Text & forms- Work product
WP05· Time-based media- Conditions
licensed· Licensed pro app- Proposed difficulty
- 3 / 5
Proposed verifier
JSON 'markers' array has 3 entries with cm names and tm/dr exactly as specified; lottie-web playSegments by marker name plays frames in those ranges (harness check); animation unchanged otherwise.
Proposed partial credit
60% three markers exact (20 points each); 30% playback by name works; 10% animation unchanged.
R06.05.01.03-T10 Rig a Rive character with blink and look-at inputs
Original instruction
In the Rive editor, from input/robot_face.riv (static artboard), add bones/constraints so the pupils follow a Number input 'lookX' (−1…1) via a blend state, a random-interval blink animation (every 2–5 s), and a Trigger 'surprise' that widens the eyes for 600 ms. State machine 'FaceSM'; export out/robot_face.riv.
- Platforms
web· Any OS (web)mac· macOSwin· Windows- Applications
- Rive
- Interfaces
brow· Browserdesk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
geom· Precise geometrydrag· Drag & droppath· Continuous path- Work product
WP05· Time-based media- Conditions
long· Long-horizon- Proposed difficulty
- 5 / 5
Proposed verifier
Runtime harness: lookX = −1/0/1 moves pupil centers to GT positions (± 3 px) with linear blend; blink occurs 2–5 s apart over 30 s; surprise scales eye whites ≥ 1.2× for 600 ± 50 ms then returns.
Proposed partial credit
40% look-at blend; 25% blink timing; 25% surprise trigger; 10% state machine structure.
R06.05.01.03-T11 Reveal a logo with a shape-layer mask wipe
Original instruction
In After Effects (1080×1080, 30 fps) reveal input/logo.svg with an animated shape-layer track matte wiping diagonally from bottom-left to top-right over 24 frames, followed by the tagline sliding up 40 px with opacity 0→100 over 12 frames. Export out/logo_reveal.json.
- Platforms
mac· macOSwin· Windows- Applications
- After Effects · Bodymovin
- Interfaces
desk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
geom· Precise geometrypath· Continuous pathclick· Point & click- Work product
WP05· Time-based media- Conditions
licensed· Licensed pro app- Proposed difficulty
- 3 / 5
Proposed verifier
lottie-web render: revealed logo area grows monotonically along the diagonal (centroid moves bottom-left→top-right) and is complete at frame 24; tagline starts after 24, rises 40 ± 3 px and fades in over 12 frames; matte present (tt/td) in JSON.
Proposed partial credit
45% diagonal wipe; 35% tagline motion; 20% matte in JSON and valid export.
R06.05.01.03-T12 Animate a consistent six-icon set and export each
Original instruction
Animate the 6 icons in input/icons/*.svg in After Effects as separate comps (96×96, 60 fps), each a 500 ms 'activate' animation with the same easing (cubic-bezier 0.4,0,0.2,1) and stroke width 2 px, and export each as out/icons/icon_<name>.json.
- Platforms
mac· macOSwin· Windows- Applications
- After Effects · Bodymovin
- Interfaces
desk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
geom· Precise geometrypath· Continuous pathclick· Point & click- Work product
WP05· Time-based media- Conditions
licensed· Licensed pro app- Proposed difficulty
- 3 / 5
Proposed verifier
6 JSON files named correctly; each op = 30 at 60 fps; stroke widths = 2 in all shape strokes; motion progress curves (from render tracking) fit the specified bezier (RMS ≤ 0.04) in all 6; final frame equals static icon (SSIM ≥ 0.97).
Proposed partial credit
20% files/naming; 20% duration; 15% stroke width; 45% shared easing and end state.
R06.05.01.03-T13 Write on a signature in stroke order
Original instruction
In After Effects, from input/signature.svg (7 strokes, order given in input/stroke_order.txt), animate a write-on with Trim Paths so strokes draw sequentially in that order at constant pen speed (800 px/s), total under 3 s. Export out/signature.json.
- Platforms
mac· macOSwin· Windows- Applications
- After Effects · Bodymovin
- Interfaces
desk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
path· Continuous pathclick· Point & clickgeom· Precise geometry- Work product
WP05· Time-based media- Conditions
licensed· Licensed pro app- Proposed difficulty
- 3 / 5
Proposed verifier
lottie-web render: per stroke (GT masks) start time ordering equals stroke_order; no two strokes drawing simultaneously; drawn length rate 800 ± 80 px/s; complete signature matches SVG (IoU ≥ 0.95).
Proposed partial credit
40% stroke order; 30% constant speed; 15% no overlap in time; 15% final match.
R06.05.01.03-T14 Fix rendering differences across Lottie players
Original instruction
input/promo_banner.json renders correctly in lottie-web but differs in lottie-ios and lottie-android (gradient fills, rounded-corner modifiers, a precomp time remap). Edit the source fixtures/promo_banner.aep and re-export so all three renderers match the AE reference within SSIM ≥ 0.95.
- Platforms
mac· macOSwin· Windows- Applications
- After Effects · Bodymovin
- Interfaces
desk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
vis· Visual judgmentclick· Point & clickgeom· Precise geometry- Work product
WP05· Time-based media- Conditions
licensed· Licensed pro apphidden· Hidden/stale state- Proposed difficulty
- 4 / 5
Proposed verifier
Harness renders with lottie-web, lottie-ios (simulator) and lottie-android (emulator): mean SSIM vs AE reference ≥ 0.95 in all three; per-frame min ≥ 0.9; duration unchanged.
Proposed partial credit
30% web parity; 35% iOS parity; 35% Android parity.
R06.05.01.03-T15 Export a procedural Cavalry animation as Lottie
Original instruction
In Cavalry, build a 600×600, 30 fps, 4 s animation: 12 circles on a ring (Duplicator, radius 200) that pulse in scale with a stagger wave travelling around the ring once per 2 s, looping. Export Lottie to out/pulse_ring.json.
- Platforms
mac· macOSwin· Windows- Applications
- Cavalry
- Interfaces
desk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
click· Point & clickdrag· Drag & dropgeom· Precise geometry- Work product
WP05· Time-based media- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
lottie-web render: 12 circles centered on a 200 ± 2 px ring; per-circle scale phase offset = i/12 of the 2 s period (±2 frames); loop: frame 0 equals frame 120 (SSIM ≥ 0.99); JSON valid with op = 120.
Proposed partial credit
25% ring layout; 40% stagger wave phases; 20% loop; 15% export validity.
R06.05.01.03-T16 Shrink a heavy Lottie to under 150 KB without visual change
Original instruction
input/hero_anim.json is 1.2 MB (hidden layers, unused precomps, dense baked keyframes, a raster image). Starting from fixtures/hero_anim.aep, optimize and re-export so out/hero_anim_opt.json is ≤ 150 KB, vector-only, and visually identical (per-frame SSIM ≥ 0.98 vs original render).
- Platforms
mac· macOSwin· Windows- Applications
- After Effects · Bodymovin
- Interfaces
desk· Desktop GUIterm· Terminal- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
HY· Hybrid- Interaction primitives
click· Point & clickcode· Code & commandsvis· Visual judgment- Work product
WP05· Time-based media- Conditions
licensed· Licensed pro app- Proposed difficulty
- 4 / 5
Proposed verifier
File size ≤ 153,600 bytes; no image assets; lottie-web per-frame SSIM ≥ 0.98 (mean) and ≥ 0.95 (min) vs original JSON render; same op/fr.
Proposed partial credit
40% size target (half credit at ≤ 300 KB); 15% vector-only; 35% visual parity; 10% timing unchanged.
R06.05.01.03-T17 Control: hand-author the T05 spinner Lottie JSON
Original instruction
Control pair of T05 (CLI half). Without After Effects, write out/spinner_code.json (Lottie schema) by hand or with a script: same spec as T05 (200×200, 60 fps, 2 s seamless loop, rotating arc with oscillating trim length, ≤ 20 KB, no expressions).
- Platforms
lin· Linuxmac· macOSwin· Windows- Applications
- Python · lottie-web
- Interfaces
term· Terminal- GUI need · task setting
CL· CLI-sufficient- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
code· Code & commands- Work product
WP05· Time-based media- Conditions
- None declared
- Proposed difficulty
- 2 / 5
Proposed verifier
Same checks as T05 with lottie-web render. Paired with T05 to measure GUI authoring vs direct schema authoring for simple motion.
Proposed partial credit
25% size/no expressions; 25% rotation; 25% length oscillation; 25% loop.
R06.05.01.03-T18 Author a dotLottie with a hover/click state machine
Original instruction
Using the LottieFiles editor (or dotLottie tooling), package input/heart.json into out/heart.lottie with a state machine: Idle loops segment 0–30, Hover plays 30–45 and holds, Click plays 45–90 once then returns to Idle; and a dark theme that swaps the heart fill to #FF6B81.
- Platforms
web· Any OS (web)- Applications
- LottieFiles
- Interfaces
brow· Browser- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
click· Point & clicktype· Text & forms- Work product
WP05· Time-based media- Conditions
- None declared
- Proposed difficulty
- 4 / 5
Proposed verifier
dotLottie manifest lists the state machine and theme; dotlottie-web player harness: pointer events reproduce the 3 states with frame ranges ±1; theme applied → fill ΔE2000 ≤ 2 to #FF6B81.
Proposed partial credit
20% package valid; 50% state machine behaviors; 30% theme.
R06.05.01.03-T19 Animate a four-part logo lockup to a timing spec
Original instruction
From input/brand_logo.ai (mark, wordmark, tagline, underline) build the lockup animation in After Effects per input/motion_spec.csv (start, duration, easing per element; mark rotates in 90°→0°, wordmark letters stagger 2 frames, underline draws 0→100%). Export out/lockup.json and out/lockup.mp4 (1920×1080).
- Platforms
mac· macOSwin· Windows- Applications
- After Effects · Bodymovin
- Interfaces
desk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
geom· Precise geometrypath· Continuous pathclick· Point & clickvis· Visual judgment- Work product
WP05· Time-based media- Conditions
licensed· Licensed pro app- Proposed difficulty
- 4 / 5
Proposed verifier
Tracking on both lottie-web render and MP4: per element start/end within ±1 frame of spec; easing curve RMS ≤ 0.05 of specified bezier; mark rotation 90→0; letter stagger 2 frames; underline progress; final frame SSIM ≥ 0.97 vs static logo.
Proposed partial credit
35% element timing; 25% easing; 20% specific motions; 20% final lockup and both exports.
R06.05.01.03-T20 Produce a three-scene onboarding Lottie under 250 KB
Original instruction
From input/onboarding_frames.fig exports (3 scenes, SVG assets) create in After Effects a 375×600, 30 fps onboarding animation: each scene 3 s with elements entering per input/storyboard.pdf, scene transitions, a looping idle in scene 3, markers 'scene1'–'scene3'. Export out/onboarding.json ≤ 250 KB rendering identically on web, iOS and Android.
- Platforms
mac· macOSwin· Windows- Applications
- After Effects · Bodymovin
- Interfaces
desk· Desktop GUI- GUI need · task setting
HY· Hybrid- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
geom· Precise geometrypath· Continuous pathdrag· Drag & dropvis· Visual judgment- Work product
WP05· Time-based media- Conditions
licensed· Licensed pro applong· Long-horizon- Proposed difficulty
- 5 / 5
Proposed verifier
Size ≤ 256,000 bytes; vector-only; markers exact; per scene element entrance windows within ±2 frames of storyboard and settled positions within 6 px; scene 3 loop seamless; cross-renderer SSIM ≥ 0.95.
Proposed partial credit
15% size/vector; 15% markers; 35% storyboard timing/layout; 35% loop and renderer parity.
Mapped research references
No benchmark reference is assigned to this class in the current mapping.