Canvas Docs

Shared Block Controls

Open the settings of any Canvas block and beneath its own options you will find the same panels, every time. The reference documents them once, and the individual block pages do not repeat them, so this page is where you learn them: not only what each control does, but which one to reach for, because Animation and Scroll Effects in particular are often confused for one another.

Animation

Animation plays once, as the block scrolls into view. Use it for reveals: a heading that fades up, a row of cards that arrive one after another. Because it fires on entry and then stops, it never fights the visitor for control of the page.

The panel carries these settings:

  • Entrance AnimationDefaultEmpty

    Animation played the first time the block scrolls into view.

    ChoicesNone (empty)BounceFlashPulseRubber BandShake XShake YHead ShakeSwingTadaWobbleJelloand 49 more

  • Animation SpeedDefaultEmpty

    How fast the entrance animation runs. Infinite repeats it for as long as the block is on the page.

    ChoicesNormal (empty)FasterFastSlowSlowerInfinite (Loop)Shown when Entrance Animation is set

  • Delay (ms)Default0

    How long to wait after the block comes into view before the entrance animation starts, in milliseconds.

    Shown when Entrance Animation is set

  • Exit AnimationDefaultEmpty

    A second animation that replaces the entrance one once it has finished, for a block meant to leave again.

    ChoicesNone (empty)Fade OutFade Out DownFade Out LeftFade Out RightFade Out UpBounce OutBounce Out DownBounce Out LeftBounce Out RightBounce Out UpZoom Outand 12 moreShown when Entrance Animation is set

  • Exit Delay (ms)Default3000

    How long the block stays in place before the exit animation begins, counted from the end of the entrance delay.

    Shown when Exit Animation is set

Two habits make entrance animation look designed rather than decorated. Keep one animation family per section, because mixed directions read as noise. And stagger siblings with Delay (ms) in small steps, since three cards arriving 150 milliseconds apart read as a sequence while three arriving together read as a flicker.

Scroll Effects

Scroll Effects tie the block to the scroll position continuously: the block moves, fades or scales in proportion to how far the visitor has scrolled, for as long as it is on screen. This is the panel for parallax and depth. Where Animation answers "how does this appear", Scroll Effects answers "how does this behave while it is here", and that is the test for choosing between them. This is a premium panel.

The panel carries these settings:

  • Enable Scroll EffectsDefaultOff

    Tie the appearance of the block to how far the page has been scrolled, for effects such as parallax.

  • Scroll OffsetDefaultEmpty

    How far the block must travel into the screen before the effect starts. Accepts a percentage or a number of pixels.

    Shown when Enable Scroll Effects is on

  • Transform PresetDefaultEmpty

    A ready-made scroll effect for the block. None leaves the movement to styling of your own.

    ChoicesNone (custom only) (empty)Parallax UpParallax DownParallax LeftParallax RightScale InScale OutFade InFade OutRotateShown when Enable Scroll Effects is on

  • IntensityDefault1

    How strong the effect is. Higher numbers move the block further.

    Shown when Enable Scroll Effects is on and Transform Preset is set

  • Custom Scroll StyleDefaultEmpty

    Your own CSS for the scroll effect. It runs alongside the preset rather than replacing it.

    Shown when Enable Scroll Effects is on

  • Include Width VariableDefaultOff

    Makes the block width available to the scroll effect, for effects that move sideways.

    Shown when Enable Scroll Effects is on

  • Include Height VariableDefaultOff

    Makes the block height available to the scroll effect, for effects that move up and down.

    Shown when Enable Scroll Effects is on

Start from a Transform Preset and adjust Intensity before writing anything custom: the presets cover the movements the designs actually use, and intensity is the difference between depth and seasickness.

Advanced

The Advanced panel is where a block meets code you did not write. WordPress contributes two boxes of its own here, and Canvas adds two more, and each of the four has a distinct job:

  • HTML anchor (from WordPress) gives the block an id. Use it as a link target: one page navigation, a menu item that scrolls to a section, or the anchor a popup opens from.
  • Additional CSS class(es) (from WordPress) is for classes that already exist, which in Canvas means the theme's utility classes. Spacing, alignment and visibility utilities applied here keep the styling in the class system where the rest of the design lives.
  • Custom CSS (from Canvas) is for declarations no existing class provides. It applies to this block only, with no selectors to write, so it is the right tool for a one off tweak that does not deserve a child theme.
  • Custom Attributes (from Canvas) adds data- and aria- attributes, one per line as key=value. Reach for it when a script reads a data attribute from the markup, or when a block needs an ARIA attribute its options do not expose.

The settings detail:

  • Custom CSSDefaultEmpty

    Extra CSS for this block only. Write property and value pairs, such as "color: #fff", with no selectors around them.

  • Custom AttributesDefaultEmpty

    Extra HTML attributes for this block, one per line as key=value. Only data- and aria- attributes are accepted.

Block Defaults

The Block Defaults panel saves the current block's settings as the starting point for every block of that type you insert from now on. Configure one block the way your site wants it, choose Save defaults, and you stop re-making the same choices on every page. Reset defaults returns the type to its shipped settings; resetting warns you that newly inserted blocks will use the shipped defaults again.

Two boundaries keep this predictable. Saved defaults apply to newly inserted blocks only, never to blocks already in your content. And the per instance identity boxes, HTML anchor and Additional CSS class(es), are never part of saved defaults, because stamping one block's id onto every future block would break the pages that link to it.

The AI Button

Fields that hold visitor facing words or images also carry a small AI button under the control. It generates or improves that field's content in place, and it has a section of its own, starting at What Canvas AI Does. For why some fields carry the button and others deliberately never will, see Where The AI Button Appears.

Pitfalls

The shared panels hide most of their settings until they apply, and that is the source of nearly every question about them:

  • The Animation panel looks almost empty. Speed, delay and the exit settings appear only once Entrance Animation is set, and Exit Delay (ms) only once Exit Animation is set. Pick an entrance first.
  • Intensity is missing. It appears only while Enable Scroll Effects is on and a Transform Preset is chosen. It scales a preset, so with no preset there is nothing for it to scale.
  • Custom Attributes are ignored. Only data- and aria- attributes are accepted, one per line as key=value. Anything else is dropped when the block renders, by design, because arbitrary attributes are a security surface.
  • Custom CSS seems to do nothing. Write bare property and value pairs, such as "color: #fff", with no selectors and no braces around them. A pasted rule with a selector is not valid input here.

Read What Canvas AI Does for the AI button these panels sit beside, then return to The Canvas Block Library and start opening block pages: everything on them will now be new information.

Was this page helpful?