MotionHub Guide

How the three tools fit together, and how to use each one.

— handoff & audit

Overview

One page for Lottie playback and motion handoff

MotionSheet reads Bodymovin/Lottie JSON locally in the browser. It can play the animation, inspect the timeline, diagnose heavy files, and generate a compact motion handoff table when semantic keyframes are available.

Local upload

The JSON is read in your browser and is not uploaded to a server.

Playback + timeline

Preview the Lottie, scrub the effective timeline, and inspect layer segments.

Motion table

Keyframe-based motion is converted into a merged-cell table for handoff.

Complexity review

Frame-visibility and heavy vector files are flagged before handoff.

Workflow

Upload, preview, copy

Start with a JSON upload. Use Table for handoff data and Timeline for playback, scrubbing, and quick animation checks.

1
Upload JSON
2
Preview playback and timeline
3
Review warnings and generated rows
4
Copy Table, or export MD / Dev JSON

Timeline

Click a segment to spot the exact layer

In the Timeline tab you can play, loop, change speed, set a background, and scrub the playhead. Click any property segment to inspect it: its parameters and a zoomed layer thumbnail appear on the right, and the matching layer is boxed on the main canvas so developers know exactly which layer moves.

Layer preview

Layer: —
Property: —
Change: —

Click a segment to preview the layer

Action Markers

Mark the action range in AE

Add null-object layers named [start]ActionName and [end]ActionName around the motion you want to hand off (Nulls don't render, so they're safe as markers). Short tags [s]ActionName and [e]ActionName also work.

[start]Open animated layers... [end]Open

Optional element groups use (start)Name / (end)Name or (s)Name / (e)Name.

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.

+80ms

Delay: (+80ms, -90ms)

-90ms

Example

80ms start, 230ms duration, 400ms total

With Delay (+80ms, -90ms), Duration 230ms, and Total 400ms, the segment runs from 80ms to 310ms. The remaining 90ms is the tail distance to the action end.

+80ms -90ms 0ms 80ms 310ms 400ms

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.

MotionHub