💡 Quick Code Tip: Cookie Based Timelines

In specific situations like hiding site cookie notices or discount modals you might desire to play timeline only once on the first load. This solution will be obsolete in the near future, but you might need it now.

Step 1: Create a page load timeline set to "Load timeline paused". Tweak other settings to your liking. You can also click on "mp1647446640.play();" and store timeline UID for later.

Step 2: Insert the JS code via Code Block in case of Oxygen. In case of Gutenberg, you would use a Custom HTML element, and the code needs to be wrapped inside <script></script> tags. You can also use any plugin that can output JS code on the frontend (footer) or you can use PHP filter "motionpage_after_scripts".

Step 3: Modify the code to your needs.
hideLoaderCookieName = this will be a unique name of the cookie
hideLoaderDays = expiration time of the cookie (in days)
mp1647446640 - replace with the UID of your timeline that you copied in the first step.

If you need a non-expiring value, you can use localStorage instead of cookie, or simply set hideLoaderCookieName to something like 3653 (~10 years).

During testing, you can write setCookie(0) in the browser dev console to clear the cookie expiration time.

Cookie helper codes if you decide to modify the code to your specific needs.

💡 If you only want to prevent timeline play on current session, you can use the code below:

window.addEventListener("DOMContentLoaded", () => {
	if (!sessionStorage?.time) {
		window._mp_1647446640.play();
		sessionStorage.setItem("time", Date.now());
	}
});