Inspector Spacetime

from Google SUMux Motion Design
motiondesign@google.com

Sketch2AE download

Inject motion specs into reference video to become an engineer’s best friend

Specs are a necessary part of communicating UX to engineering. It's often difficult and time consuming to deliver the data required to replicate motion on device. With Inspector Spacetime you can generate this data alongside the reference quicktime, with just one click.

Built by Adam Plouff for the SUMux Motion Design Team at Google.

Download


The script is open source and also available on GitHub.

  1. Download the .jsx file
  2. Close After Effects
  3. Drag the downloaded script file into Applications > Adobe After Effects [version number] > Scripts > ScriptUI Panels
  4. Fire up After Effects again
  5. Navigate to the Window menu up top. At the bottom you'll see InspectorSpacetime_[version number].jsx

Usage


Basics

Select a pair or several pairs of keyframes and click the giant button. Your comp will be duplicated and resized to create space for all the useful spec data to live right alongside the reference animation.

A new text layer is generated with all the selected element data. Raw text may be edited. Enabling the expression will update style and live values.

Live Text

Spec data is based on the overall transition time. Markers are placed at the time of the first and last selected keyframes as a reference for the transition time. Moving the start and end markers updates:

  • Total Duration
  • Delay
  • Time Counter

Spec Layer Name heading comes from the layer name itself.

Sharable Data

Keyframe data output:

  • Property name
  • Delay time (live value)
  • Duration of keyframe pair
  • Value change
  • Cubic Bezier interpolation curve

Position

  • May be coordinates or distance
  • 3X is the default DP for working at 1080x1920

Add-ons


Isolation Layer

If it's hard to see what's being spec'd, you can grey out the layers below what you want to focus on. To isolate layers, click to add an isolation adjustment layer and drag it below your focused layers.

Time Counter

Created with every spec, a counter is also available as its own layer. Create a millisecond counter with a defined start and end point. Start the timer at the beginning of the transition to easily illustrate the global start time.

Pointer

One element is often known by multiple names, which can be confusing. Click the pointer button to draw lines between spec data and visual elements.

Why the dumb name?


Named after the Doctor Who parody from the underrated NBC comedy Community. It was a really great show.

Inspector Spacetime. It's a bad pun. But I'm a dad. I can't help it.


— Adam