How to disable animations on origin page?

tobimori commented 7 months ago

Describe the feature

I have some move in transitions on load and they will get retriggered each time the live preview reloads. How can I conditionally disable the animations in my custom JS code / check if the page is running inside live preview?

Final checks

[X] Check existing issues.

johannschopplich commented 7 months ago

Great idea. Will implement that. 👍

johannschopplich commented 7 months ago

With the release of v1.1.0+, you can now detect the preview mode in both backend and frontend code. There's a dedicated documentation guide.

In summary:

Backend

The Kirby Live Preview provides a previewMode content key that you can use to detect whether the current page is in preview mode. The key is true if the page is in preview mode and undefined (false) otherwise:

if ($page->previewMode()->isTrue()) {
  // Page is in preview mode
}

Wrap the HTML in your snippets and template that you want to hide in a conditional statement that checks if the previewMode key is false:

<?php if ($page->previewMode()->isFalse()): ?>
  <?php snippet('cookie-banner') ?>
<?php endif ?>

Frontend

The same page rendered as a preview embeds a data-preview-mode attribute in the document element (<html> tag). You can use this attribute to hide or disable elements in your frontend code.

For example, you can hide the cookie banner with the following CSS:

[data-preview-mode] .cookie-banner {
  display: none;
}

For JavaScript animations or other features, you can use the data-preview-mode attribute to disable them:

const isPreviewMode = document.documentElement.dataset.previewMode;

if (!isPreviewMode) {
  // Run your animations or other features
}

kirby-tools / community