Motion Controls for Gutenberg Blocks

What the plugin does

Block Motion:

• adds motion-related controls for selected blocks in the Gutenberg editor (via editor scripts)
• injects corresponding data-* attributes into the rendered HTML output
• loads minimal CSS + a frontend JS runtime to apply animations on the site
• supports per-block options like:
  • text animation modes for headings
  • box/appear animations with delays
  • parallax animation with adjustable speed
  • sticky/fixed style flags
  • optional background/text color values as data attributes

The plugin is built to keep markup clean and implementation predictable: the block output remains standard HTML, and the motion behavior is driven by attributes.

Supported blocks (from the code)

Block Motion hooks into the render pipeline of these blocks and injects data attributes when the matching block attributes are present:

• core/heading
• core/column
• core/group
• core/image
• core/columns
• cb/wide (custom block name referenced in config)

Render-time attribute injection

For supported blocks, the plugin maps block attributes to HTML data-* attributes, for example:

• Heading:
  • textAnim → data-text-anim
  • parallax → data-parallax-anim
  • speed → data-parallax-speed
• Column / Group:
  • boxAnim → data-box-anim
  • delay → data-box-anim-delay
  • bgColor → data-bg-color
  • textColor → data-text-color
  • parallax → data-parallax-anim
  • speed → data-parallax-speed
  • (Column only) fixed → data-fixed
• Columns:
  • appear → data-box-anim
  • sticky → data-sticky

This approach allows the frontend script to apply effects without altering block structure or relying on additional wrappers.

Special heading handling (baseline mode)

When a Heading block has textAnim = baseline, the plugin wraps the heading text inside a <span>:

• <h2>Title</h2> becomes <h2><span>Title</span></h2>

This is typically used for text animation techniques that require a dedicated inline wrapper.

Assets loaded

Editor (Block Editor)

The plugin loads block editor scripts that provide motion settings for blocks:

• js/text-admin.js
• js/box-admin.js
• js/parallax-admin.js

Frontend

The plugin loads the required styles and runtime script:

• css/box-anim.css
• css/text-anim.css
• css/parallax-anim.css
• js/anim.js