Prism/developer documentation/Page Builder Actions

Page Builder Actions

Triggers, property changes, motion and easing curves on Page Builder elements.

Every Page Builder element has an actions array. Each action pairs a trigger (When) with something to do (Then). Actions are stored with the page in the LANDING and PAGES settings and normalized by normalizePage() in src/web/lib/page.ts.

{
  "id": "a1b2c3d4",
  "trigger": "hover",
  "kind": "move",
  "property": "text",
  "value": "",
  "x": 0,
  "y": -8,
  "amount": 110,
  "preset": "bounce",
  "duration": 400,
  "delay": 0,
  "every": 3000,
  "curve": [0.25, 0.1, 0.25, 1],
  "entrance": false
}

Triggers

Trigger	Fires
`user.signed.in`	Once on render when a customer is signed in.
`user.signed.out`	Once on render when nobody is signed in.
`user.staff`	Once on render when the visitor is a team member.
`load`	When the page loads.
`view`	The first time 20% of the element scrolls into view.
`hover`	On mouse enter, and reverses on mouse leave.
`click`	Toggles on each click. Animations replay on every click.
`interval`	Every `every` milliseconds.

User triggers are resolved by applyActions() before render. set and hide actions apply directly, matching motion actions are turned into load actions, and actions that do not match are dropped. Older pages that stored condition instead of trigger still load.

Kinds

Kind	Fields	Effect
`set`	`property`, `value`	Changes `text`, `href`, `body`, `src`, `icon` or `variant`. `{user.name}`, `{user.email}` and `{name}` are replaced in `value`.
`hide`		Hides the element. With a user trigger it is removed from the layout, otherwise it fades out.
`move`	`x`, `y`	Translates by pixels.
`rotate`	`amount`	Rotates by degrees.
`scale`	`amount`	Scales by percent, `100` is the original size.
`fade`	`amount`	Fades to an opacity percent.
`animate`	`preset`	Plays `bounce`, `shake`, `pulse`, `spin`, `wobble`, `pop`, `float`, `flash`, `jello` or `heartbeat`.

With an event trigger, set and hide stay active while the trigger is: while hovered, until clicked again, or every other interval tick, so an interval set swaps between two texts.

Motion

Motion kinds run on the Web Animations API through src/web/lib/motion.ts. Transforms use composite: "add", so several actions on one element stack. Motion is skipped when the visitor prefers reduced motion.

Field	Meaning
`duration`	Length in milliseconds.
`delay`	Wait before playing, in milliseconds. Also delays `set` and `hide` on `load`, `view` and `interval`.
`every`	Interval length in milliseconds, used by `interval`.
`entrance`	Plays from the target back to the resting state, so the element starts moved, rotated, scaled or faded and settles in. Not used with `hover` or `click`.
`curve`	Cubic bezier control points `[x1, y1, x2, y2]`. `x` is clamped to `0..1`, `y` may overshoot for spring and anticipation effects.

hover and click hold the target pose and reverse back to rest. interval plays rest, target, rest on each tick.

Easing Curves

The builder edits curve with a draggable graph (src/web/components/ui/curveEditor.tsx) and offers these presets from CURVES:

Preset	Curve
`linear`	`[0, 0, 1, 1]`
`ease`	`[0.25, 0.1, 0.25, 1]`
`easeIn`	`[0.42, 0, 1, 1]`
`easeOut`	`[0, 0, 0.58, 1]`
`easeInOut`	`[0.42, 0, 0.58, 1]`
`back`	`[0.34, 1.56, 0.64, 1]`
`anticipate`	`[0.36, 0, 0.66, -0.56]`
`snappy`	`[0.2, 0.9, 0.1, 1]`

Dragging a handle switches the preset to Custom. The Play button on a motion action previews it on the builder canvas.

Rendering

PageView wraps every element in two boxes. The outer box takes the grid span and receives hover and click events, and the inner box (data-motion="<element id>") is what moves, so an element moving away from the cursor does not cancel its own hover.

PreviousPages NextLanguages