MotionSheet Guide

What this tool does, what it generates, and how to read the timing table.

Overview

Turn AE motion data into a developer-readable table

MotionSheet reads Bodymovin/Lottie JSON exported from After Effects and converts keyframes, timing, curves, action markers, and parent-child relationships into a motion handoff table.

Local JSON reading

The browser reads the selected file locally. It is not uploaded to a server.

Action grouping

Supports [start] / [end] action markers and optional element markers.

Parent / child motion

Keeps inherited parent motion separate from child animation values.

Curve preservation

Keeps numeric cubic curves and reports diagonal curves as linear.

Workflow

Upload, preview, copy, then hand off

The main workflow is to select a Bodymovin JSON file, preview the generated table, copy the table into a handoff document, and optionally download Markdown or developer JSON.

1
Select Bodymovin JSON
2
Preview the merged motion table
3
Copy Table as the primary handoff output
4
Use Download MD or Dev JSON only when needed

Outputs

What each button is for

Copy Table

Primary output. Copies the right-side preview table and preserves table structure where supported.

Copy Markdown

Text fallback for docs, comments, and quick review.

Download MD

Downloads a Markdown version of the generated table.

Dev JSON

Downloads normalized developer handoff data. It is not the original uploaded JSON.

Delay Format

Two anchors on one global timeline

Delay uses the format (+Xms, -Yms). The positive value marks when the animation starts. The negative value marks how far the animation ends before the total action ends.

+60ms

Delay: (+60ms, -20ms)

-20ms

Example

Start at 60ms, run for 250ms, end at 310ms

If Delay is (+60ms, -20ms), Duration is 250ms, and Total is 330ms, the animation starts at 60ms and ends at 310ms. The remaining 20ms is the tail distance to the action end.

+60ms -20ms

0ms 60ms 310ms 330ms

Parent / Children

Parent and child rows share the same 0ms origin

Parent and child delays are not nested offsets. Every +Xms value is placed directly on the same global timeline. Developers can use each delay value as an absolute start position inside the action.

Parent	Child	Parent Property	Child Property	Parent Delay	Child Delay	Total
Window group parent	Info 1 child	scale:110-100	opacity:0-100	(+67ms, -0ms)	(+67ms, -200ms)	467ms
	Info 2 child		opacity:0-100		(+133ms, -133ms)
	Info 3 child		opacity:0-100		(+200ms, -67ms)

Use +Xms for implementation

Treat +Xms as the start time in code.

Use -Yms for review

Use -Yms to verify that the animation ends at the expected tail position.

Do not nest child delay

Child delay values are already global. Do not add them to the parent delay.