Utility Filters

In WordPress, filters allow you to modify data before it's used by the system or sent to the browser. The add_filter function lets you attach your own functions to these filters, enabling you to alter text, modify outputs, or change default settings. Similar to actions, you can use the has_filter function to check if a specific filter has been applied.

Disable Loading on Mobile

When activated, this filter utilizes the wp_is_mobile function to determine device type. If it detects a mobile device, the script loading is disabled, ensuring that no code runs on the page for mobile users. Since version 2.1.7.

/**
 * @param boolean $value Default false.
 * @param int $post_id Post/Page ID.
 * @return boolean
 */
add_filter(
	'motionpage/utils/disableMobile',
	function ($value, $post_id) {
		// Prevent loading on mobile device for post/page 123
		if ($post_id === 123) {
			return true;
		}

		// Returns false - same as default behavior
		return $value;
	},
	10,
	2
);
/**
 * Use the following filter to disable this feature across your entire site
 */
add_filter('motionpage/utils/disableMobile', '__return_true');

Defer or Async Attribute for GSAP script

Add the defer or async attribute to the GSAP core file site-wide. Since version 2.1.7.

/**
 * @return 'async' | 'defer'
 */
add_filter('motionpage/utils/gsapDeferAsync', function () {
  return 'defer';
});

Disable Page Reload on PageShow event for Page Exit Timelines

In Motion.page, we've integrated a default fix to handle the 'back click' issue (left arrow) for page exit timelines. This fix refreshes the entire page, a necessary step to prevent browsers from caching scripts during such events. If you find yourself needing to bypass this functionality for any reason, feel free to use the filter provided below. This gives you the control to adjust the behavior as per your specific needs. Since version 2.1.6.

/**
 * @param boolean $value Default true.
 * @param int $post_id Post/Page ID.
 * @return boolean
 */
add_filter(
	'motionpage/utils/historyExit',
	function ($value, $post_id) {
		// Disable for post/page 123
		if ($post_id === 123) {
			return false;
		}

		// Disable for post/page 456
		if ($post_id === 456) {
			return false;
		}

		// Returns true - same as default behavior
		return $value;
	},
	10,
	2
);
/**
 * Use the following filter to disable this feature across your entire site
 */
add_filter('motionpage/utils/historyExit', '__return_false');

ScrollTrigger Refresh on LazyLoaded Event

To programmatically enable and execute ScrollTrigger refresh function on a document's lazyloaded event you can use the filter below. Since version 2.1.6.

/**
 * @param boolean $value Default false.
 * @param int $post_id Post/Page ID.
 * @return boolean
 */
add_filter(
    'motionpage/utils/lazyloaded',
    function ($value, $post_id) {
        // Refresh ScrollTrigger on LazyLoaded event on post/page 123
        if ($post_id === 123) {
            return true;
        }

        // Returns false - same as default behavior
        return $value;
    },
    10,
    2
);
/**
 * Use the following filter to enable this feature across your entire site
 */
add_filter('motionpage/utils/lazyloaded', '__return_true');

Enabling Image Sequence Transcoding

To enable Image Sequence Transcoding in Safari or Firefox, insert the necessary headers. This will prevent external images/scripts from loading inside the iframe.

Use the following filter:

add_filter('motionpage/utils/requireCorp', '__return_true');

This code allows the use of Image Sequence Transcoding in Safari or Firefox. However, external images/scripts will not load in the iframe on the page built with Motion.page.

Integrating CookieBot with Motion.page

If you're using CookieBot, you can add the data-cookieconsent="ignore" attribute to all scripts related to Motion.page. This can be achieved by applying the following filter:

add_filter('motionpage/utils/cookieconsent', '__return_true');

This code ensures that CookieBot ignores all Motion.page related scripts, enhancing your site's cookie management.

Preventing Flash of Unstyled Content (FOUC)

To prevent FOUC, we use a code snippet that makes the body visible only after the content is loaded. This is particularly useful if you have timelines running before the fold (the visible section during page load, such as the hero section).

You can disable this feature site-wide or on individual pages based on the post ID.

Disable FOUC Site-Wide

Use the following filter to disable this feature across your entire site:

add_filter('motionpage/utils/fouc', '__return_true');

Disable FOUC Based on Post ID

To disable this feature for specific pages, use the following filter and replace 123 and 456 with the IDs of the posts you want to exclude:

add_filter('motionpage/utils/fouc', function ($value, $post_id) {
  if ($post_id === 123 || $post_id === 456) {
    return true;
  }
  return false;
}, 10, 2);

In both cases, we pass two arguments, where $value is false and the $post_id is the ID of the currently loaded post.

Managing the Prefers-Reduced-Motion Feature

Our plugin incorporates an accessibility feature known as prefers-reduced-motion. You can typically disable this feature for each timeline under the advanced options settings. However, if you wish to disable this feature site-wide or on individual pages, you can use the following code snippets.

Disable Prefers-Reduced-Motion Site-Wide

Use the following filter to disable this feature across your entire site:

add_filter('motionpage/utils/bypassReduced', '__return_true');

Disable Prefers-Reduced-Motion Based on Post ID

To disable this feature for specific pages, use the following filter and replace 123 and 456 with the IDs of the posts you want to exclude:

add_filter('motionpage/utils/bypassReduced', function ($value, $post_id) {
  if ($post_id === 123 || $post_id === 456) {
    return true;
  }
  return false;
}, 10, 2);

In both cases, we pass two arguments, where $value is false and the $post_id is the ID of the currently loaded post.

100 %