Animations and transitions

Motion settings in Slab let merchants control how movement feels across the storefront. Use Theme settings > Motion to choose page and header transitions, then decide whether to keep button and image effects enabled.

How to set up animations and transitions

Use this order to keep motion updates predictable:

1. Open Theme settings > Motion.

2. Turn on Enable animations to unlock all motion controls.

3. Set Page transition first so page-to-page movement matches your brand style.

4. Set Header transition to control how the header enters or shifts.

5. Turn Enable button motion on or off based on how interactive you want calls to action to feel.

6. Turn Enable image fade on if you want images to fade in as they load.

7. Preview key templates (home, collection, and product) before publishing.

If Enable animations is turned off, the remaining motion options are hidden in the theme editor.

Suggested setup defaults for most stores

• Keep Enable animations on so your storefront has consistent movement behavior.

• Start with Page transition set to Fade for subtle, broad compatibility.

• Keep Header transition set to None unless your header movement needs to feel more pronounced.

• Keep Enable button motion on so interactive elements still feel responsive.

• Turn on Enable image fade only when you want softer image loading behavior.

What each motion setting controls

Motion

Setting	What it controls	Options	Default
Enable animations	Master toggle for theme motion settings.	Enabled, Disabled	Enabled
Enable button motion	Motion effects used by buttons.	Enabled, Disabled	Enabled
Enable image fade	Fades images into view using the dominant color from the center of the image.	Enabled, Disabled	Disabled
Page transition	Transition style used between pages.	None, Fade, Zoom, Slide down, Slide right	Fade
Header transition	Transition style used for header movement.	None, Slide down, Slide right	None