Shortcodes

Motion.page provides three shortcodes for easy integration and enhanced control over animations and user interactions on your WordPress site.

mp-block

Conditionally blocks animation scripts for users who choose to disable animations temporarily.

[mp-block class="your-custom-class" days="30"] Click here to block animations [/mp-block]

Attributes

  • class (optional): Adds custom CSS classes to the link. Default: mp-block__button
  • days (optional): Sets how many days the animations will remain blocked. Default: 30

Clicking the generated link sets a cookie (mp-block=true) to disable animations and reloads the page.

mp-unblock

Allows users to re-enable animations after they've been blocked.

[mp-unblock class="your-custom-class"] Click here to unblock animations [/mp-unblock]

Attributes

  • class (optional): Adds custom CSS classes to the link. Default: mp-block__button unblock

Clicking the generated link resets the cookie (mp-block=false) to enable animations and reloads the page.

mp-canvas

Embeds a canvas-based animation container with optional fallback for users without JavaScript.

[mp-canvas id="unique-animation-id" no_js_url="https://example.com/fallback.jpg"]

Attributes

  • id (optional): Assigns a custom ID to the animation container. Default: auto-generated (mp-sequence-#).
  • no_js_url (optional): URL of the fallback image displayed if JavaScript is disabled.
<mp-sequence id="unique-animation-id">
  <noscript><img src="https://example.com/fallback.jpg" /></noscript>
  <canvas></canvas>
</mp-sequence>

This shortcode automatically handles CSS injection once per page, ensuring optimal performance and avoiding redundant styles.

Always set explicit heights in CSS to ensure proper canvas rendering.

Use unique IDs when managing multiple animations on the same page.

100 %