Navigation Animations

Animate the transition between pages: the old page animates out, the new page animates in.

You find the settings in "Lay Options" → "Navigation Animations":

Navigation Animations in Lay Options → Navigation Animations

There are two animations to set up:

• Showing Animation — plays when you arrive on a page
• Hiding Animation — plays when you leave a page

For both you can choose a style — Fade, Stagger Fade, Stagger Up, Stagger Down, Up, Down or None — plus a duration in milliseconds and an easing. The Stagger styles animate the page contents one after the other instead of all at once.

Two extra options:

• Use "Showing Animation" when first visiting website or hard reload — also plays the entrance animation on the very first page load and fades in the menu, site title etc. Note: this can make the first load feel slower, and if a JavaScript error occurs, your content won't show at all.
• Use "Showing Animation" when opening Page Overlays — plays the entrance animation inside Page Overlays too.

Navigation Animations will not work if WooCommerce is enabled, a Shortcode is on a page or footer, "Disable Ajax / Compatibility Mode" is active, or if you created a link by coding it yourself without the data-* attributes.

Tip: Navigation Animations combine nicely with Scroll Animations — the page fades in, then your elements animate as the visitor scrolls.