Wiggle

Appearance

Wiggle API / PathLayer

Interface: PathLayer ​

A single vector shape imported from an SVG. It animates like any node and can be recolored, overriding the fill and stroke from the file.

Extends ​

Properties ​

enter ​

readonly enter: Motion

Entrance motion for this node.

Inherited from ​

Node.enter

exit ​

readonly exit: ExitMotion

Exit motion for this node.

Inherited from ​

Node.exit

opacity ​

readonly opacity: Prop

Inherited from ​

Node.opacity

perspective ​

readonly perspective: Prop

Camera distance in pixels for the perspective of a tilt. Zero is an orthographic tilt (no foreshortening); a few hundred to a couple thousand gives a natural look, smaller being stronger.

Inherited from ​

Node.perspective

rotation ​

readonly rotation: Prop

Inherited from ​

Node.rotation

rotationX ​

readonly rotationX: Prop

2.5D tilt about the horizontal axis, in degrees. With perspective set, the layer foreshortens like a card tilted in space. Applies to a drawn layer (text, shape, image, video), not a group.

Inherited from ​

Node.rotationX

rotationY ​

readonly rotationY: Prop

2.5D tilt about the vertical axis, in degrees.

Inherited from ​

Node.rotationY

scale ​

readonly scale: Prop

Inherited from ​

Node.scale

x ​

readonly x: Prop

Inherited from ​

Node.x

y ​

readonly y: Prop

Inherited from ​

Node.y

Methods ​

anchor() ​

anchor(x, y): Node

Set the anchor point (fraction of the node's bounds) that sits at the position and that scale and rotation pivot around. Default 0.5, 0.5.

Parameters ​

x ​

number

y ​

number

Returns ​

Node

Inherited from ​

Node.anchor

at() ​

at(time): Node

Set when this element's entrance begins, in seconds from scene start.

Parameters ​

time ​

Duration

Returns ​

Node

Inherited from ​

Node.at

backdropBlur() ​

backdropBlur(radius): Node

Frosted glass: blur the content seen through this layer by radius, tinted by its fill. Applies to shapes (rect, ellipse), whose outline is the mask. A uniform layer effect.

Parameters ​

radius ​

number

Returns ​

Node

Inherited from ​

Node.backdropBlur

blur() ​

blur(radius): Node

Gaussian-blur this layer's own pixels by radius. A uniform layer effect, available on any layer, like opacity and blend.

Parameters ​

radius ​

number

Returns ​

Node

Inherited from ​

Node.blur

chars() ​

chars(): NodeGroup

Split a text node into per-character units.

Returns ​

NodeGroup

Inherited from ​

Node.chars

drawOn() ​

drawOn(opts?): PathLayer

Draw the path on: reveal it from nothing to its full length, starting at at seconds over duration, easing with ease (a spring by default).

Parameters ​

opts? ​
at? ​

Duration

duration? ​

Duration

ease? ​

Easing

Returns ​

PathLayer

fill() ​

fill(color): PathLayer

Override the fill. A color sets a solid fill; null removes it.

Parameters ​

color ​

string | Gradient | null

Returns ​

PathLayer

lines() ​

lines(): NodeGroup

Split a text node into per-line units.

Returns ​

NodeGroup

Inherited from ​

Node.lines

morph() ​

morph(targets, opts?): Node

Morph this shape's outline through a sequence of target shapes, starting at at over duration, easing each step. A target is an SVG group (loadSVG), a builder (rect, ellipse), or another layer. The outline is matched and each target is fit into this layer's box. A rectangle or ellipse layer becomes a morphing path. Text, image, and video have no single outline and are refused.

Parameters ​

targets ​

MorphTarget[]

opts? ​
at? ​

Duration

duration? ​

Duration

ease? ​

Easing

Returns ​

Node

Inherited from ​

Node.morph

morphTo() ​

morphTo(target, opts?): Node

Morph to a single target. Sugar for morph([target], opts).

Parameters ​

target ​

MorphTarget

opts? ​
at? ​

Duration

duration? ​

Duration

ease? ​

Easing

Returns ​

Node

Inherited from ​

Node.morphTo

motionBlur() ​

motionBlur(on?): Node

Exclude this layer from the composition's motion blur, keeping it sharp while the rest smears. motionBlur(true) or no call leaves it blurred.

Parameters ​

on? ​

boolean

Returns ​

Node

Inherited from ​

Node.motionBlur

moveTo() ​

moveTo(x, y, opts?): Node

Animate to a position, starting at at seconds. ease is a named curve or a spring (default "inOut"). With a spring and no duration, the motion settles naturally.

Parameters ​

x ​

number

y ​

number

opts? ​
at? ​

Duration

duration? ​

Duration

ease? ​

Easing

Returns ​

Node

Inherited from ​

Node.moveTo

name() ​

name(label): Node

Name this layer so the group it belongs to can reach it with find(name), and the studio shows the name. Used to label a component's parts.

Parameters ​

label ​

string

Returns ​

Node

Inherited from ​

Node.name

rotateTo() ​

rotateTo(degrees, opts?): Node

Animate to a rotation in degrees, starting at at seconds. Several tweens on the same property chain, each continuing from the last. See moveTo for ease.

Parameters ​

degrees ​

number

opts? ​
at? ​

Duration

duration? ​

Duration

ease? ​

Easing

Returns ​

Node

Inherited from ​

Node.rotateTo

scaleTo() ​

scaleTo(scale, opts?): Node

Animate to a uniform scale, starting at at seconds. See moveTo for ease.

Parameters ​

scale ​

number

opts? ​
at? ​

Duration

duration? ​

Duration

ease? ​

Easing

Returns ​

Node

Inherited from ​

Node.scaleTo

stroke() ​

stroke(color, opts?): PathLayer

Override the stroke. width keeps the current width if omitted; null removes the stroke.

Parameters ​

color ​

string | null

opts? ​
width? ​

number

Returns ​

PathLayer

trim() ​

trim(opts): PathLayer

Reveal a fixed window of the path. start and end are fractions (0..1) of the total length; offset shifts the window along the path.

Parameters ​

opts ​
end? ​

number

offset? ​

number

start? ​

number

Returns ​

PathLayer

words() ​

words(): NodeGroup

Split a text node into per-word units for staggered motion.

Returns ​

NodeGroup

Inherited from ​

Node.words