Site Designer Guide
effects transitions animations hover filters transform

Effects pane

The Effects pane brings motion and visual polish to your elements. It covers four areas: Transitions, Hover, Animations, and Filters & Transform — all without writing any CSS manually.

Transitions

The Transitions section lets you define how an element’s properties animate between states (e.g., from normal to :hover).

Each transition row has four controls:

ControlDescription
PropertyWhich CSS property to animate. Choose all, or a specific property like opacity or background-color.
DurationHow long the animation takes, in milliseconds or seconds (e.g., 300ms, 0.3s).
Timing functionThe easing curve: ease, ease-in, ease-out, ease-in-out, linear, or a custom cubic-bezier.
DelayHow long to wait before the animation starts.

You can add multiple transition rows to animate different properties at different speeds.

Hover state editing

The Hover section switches the Design pane into hover mode for the selected element. Any style change you make while hover mode is active writes to the :hover CSS selector instead of the base class.

  1. Enable hover mode

    Click the Edit Hover State toggle in the Effects pane. The canvas and Design pane will show a visual indicator that hover mode is active.

  2. Change styles in the Design pane

    Switch to the Design pane and adjust any property — color, background, border, transform, etc. These changes apply only to the :hover rule.

  3. Exit hover mode

    Click the toggle again to return to normal editing mode. Your base styles are unchanged.

CSS animations

The Animations section lets you attach keyframe animations to an element.

  • Keyframe presets — Choose from built-in animations like fadeIn, slideUp, pulse, and bounce to get started quickly.
  • Custom keyframes — Select “Custom” to open the keyframe editor, where you define percentage stops and the CSS properties at each stop.
  • Playback controls — Set duration, timing function, delay, iteration count (1, infinite, or a number), and fill mode (forwards, backwards, both).

Animations added here play when the page loads, or when the element is triggered by a class change via JavaScript.

Filters

The Filters section applies CSS filter functions to the element:

FilterWhat it does
blurBlurs the element and its contents. Value in px.
brightnessMakes the element lighter (> 1) or darker (< 1).
contrastIncreases or decreases color contrast.
grayscaleConverts to grayscale. 1 = fully gray.
hue-rotateShifts all hues by a degree value.
invertInverts colors. 1 = fully inverted.
saturateBoosts (> 1) or reduces (< 1) color saturation.
sepiaApplies a warm sepia tone.

Filters can be combined — each one is applied in order.

Transform

The Transform section adds CSS transform functions to the element:

  • Translate — Move the element on the X and/or Y axis without affecting document flow.
  • Scale — Resize the element uniformly or along a single axis. 1 = original size.
  • Rotate — Rotate in degrees. Positive values rotate clockwise.
  • Skew — Tilt the element along the X or Y axis.