Whiteboard Ink

Paste it into your composition

Open compositions/components/whiteboard-ink.html and copy what is inside into your own composition.A component has no size or duration of its own. It takes both from the composition you paste it into.

Variables

Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element:

Variable	Default	Accepts	What it does
`sketch`	`bulb`	`bulb`, `flow`, `rocket`	Authored preset sketch to draw. Ignored when the strokes slot holds custom paths.
`caption`	`Draw the idea`	string	Short line shown after the sketch completes.
`pen`	`show`	`show`, `hide`	Show or hide the pen nib actor.
`accent`	`green`	`green`, `blue`, `violet`	Color used by strokes marked data-ink=accent (one highlight stroke in each preset).
`exit`	`none`	`none`, `fade`, `up`	How the completed lockup leaves. none holds the final frame.

Set them with data-variable-values on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one:

<div
  data-composition-id="whiteboard-ink"
  data-composition-src="compositions/components/whiteboard-ink.html"
  data-variable-values='{"sketch":"bulb","caption":"Draw the idea","pen":"show","accent":"green","exit":"none"}'
></div>

Tagged motion-primitive intro reveal svg whiteboard line-draw slot.

Catalog

Paste it into your composition

Variables

Related topics