Controls Every Canvas Block Has

Open the settings of any Canvas block and you will find three panels below the block's own settings. They behave identically everywhere, so they are documented once here rather than repeated on two hundred pages. Read this before the individual block pages, because those pages describe only what is unique to each block.

Animation

Move the block into view as the visitor scrolls to it, and optionally out again.

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

Scroll Effects

Tie the block to the scroll position for parallax, fades and scaling. 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

Advanced

Your own CSS and HTML attributes on the block. WordPress adds the HTML anchor and additional CSS class boxes to the same panel.

The panel carries these settings:

• 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.