PHP

Motion fires three hooks for site code. Their arguments are listed in the hooks reference.

Changing the script’s settings

sleekMotion/settings filters the settings Motion prints for its script, on the front end and in the editor previews it loads into. It changes only what the script receives: the settings screen, the REST operations and WP-CLI keep reading the stored sleek-motion_settings option. Breakpoints and presets are lists of name and value pairs.

PHP

add_filter('sleekMotion/settings', function ($settings) {
  $settings['breakpoints'][] = [
    'name'  => 'tablet',
    'value' => '(min-width: 768px)',
  ];

  return $settings;
});

Whether Motion loads in editor previews is decided before the filter runs, so changing editor here has no effect.

Loading the script on a page

sleekMotion/load decides whether a front-end page loads Motion’s script. It receives whether the markup the page printed before its footer scripts holds an animated element, or true when Motion could not read that markup, and returns whether the page loads the script. Return true for pages whose animated elements JavaScript adds later, or false to keep the script off a page. The block editor and the builder previews are not filtered.

PHP

add_filter('sleekMotion/load', function ($animated) {
  return $animated || is_post_type_archive('product');
});

After Motion has booted

sleekMotion/init fires once Motion has booted, with the Motion instance. The same instance is returned by the sleekMotion() function.

PHP

add_action('sleekMotion/init', function ($motion) {
  error_log('SleekMotion ' . $motion->getVersion());
});