Breakpoints
Configure responsive breakpoints and per-breakpoint animation control.
Motion.page uses three named breakpoints — phones, tablets, and laptops — to control both the device preview in the builder and which screen sizes each animation runs on.
Global breakpoint values
Location
Settings panel → Breakpoints
Open the Settings panel (gear icon in the top-right toolbar). The Breakpoints section shows three pixel inputs, one for each device tier.
Defaults
| Device | Key | Default (max-width) |
|---|---|---|
| Phones | phones | 576 px |
| Tablets | tablets | 768 px |
| Laptops | laptops | 992 px |
All values use a max-width media query. A viewport narrower than or equal to the value is considered that device tier or smaller.
Changing pixel values
Click any input and type a new pixel value, or scroll the mouse wheel over the input to increment or decrement by 1. Changes take effect immediately after a short debounce. The builder saves breakpoints as part of the global site options — they apply to all timelines.
Tip: Set breakpoints to match your theme’s grid system (e.g. Bootstrap: 576 / 768 / 992, Tailwind: 640 / 768 / 1024).
Device preview in the Top Panel
The breakpoint pixel values power the device preview buttons in the Top Panel (center toolbar).
Clicking a device icon resizes the iframe to the corresponding pixel value:
| Button | Iframe width |
|---|---|
| Mobile (phone icon) | phones.value px |
| Tablet (tablet icon) | tablets.value px |
| Laptop (laptop icon) | laptops.value px |
| Desktop (monitor icon) | Full width |
When you update a breakpoint value in Settings, the device preview buttons immediately use the new width. This lets you preview animations at the exact pixel values your theme uses.
Per-animation breakpoint control
Location
Left Panel → Trigger tab → Enabled breakpoints
Each timeline has its own breakpoint range. Open the Trigger tab in the Left Panel and scroll to the Enabled breakpoints section.
How the range slider works
The slider has five positions, each representing a breakpoint tier:
| Position | Icon | Meaning |
|---|---|---|
| 1 | Circle-slash | No match (disabled) |
| 2 | Phone | Phones — up to phones.value px |
| 3 | Tablet | Tablets — phones.value + 1 to tablets.value px |
| 4 | Laptop | Laptops — tablets.value + 1 to laptops.value px |
| 5 | Repeat | Desktop — above laptops.value px |
Drag the two handles to select a range of positions. Icons inside the selected range are highlighted to show which device tiers the animation is active on.
Examples
| Slider range | Active on |
|---|---|
2 → 5 (all) | Every device — phones through desktop |
4 → 5 | Laptop and desktop only |
2 → 3 | Phones and tablets only |
2 → 2 | Phones only |
5 → 5 | Desktop only |
The builder generates a matchMedia guard around the animation code. For example, enabling the animation on phones only wraps it as:
if (matchMedia("screen and (max-width: 576px)").matches) {
// animation runs here
}Enabling on tablets through desktop (positions 3 → 5) produces:
if (matchMedia("screen and (min-width: 577px)").matches) {
// animation runs here
}The pixel values in these guards come directly from the global breakpoint inputs in Settings.
Workflow — responsive animations
A common pattern is to build different animations for different device tiers:
- Create a timeline for your desktop entrance. In Enabled breakpoints, set the range to laptop → desktop (positions 4 → 5).
- Duplicate the timeline. Adjust the animation properties for smaller screens. Set the range to phone → tablet (positions 2 → 3).
Both timelines target the same element. The browser applies only the one whose breakpoint range matches the current viewport width.
Related
- Breakpoints in the SDK — How to pass responsive breakpoint options via the SDK
- Device Preview — Overview of the Top Panel and iframe preview controls
- Page Load Trigger — Configure when an animation plays on page load
- Left Panel — Full reference for Left Panel tabs and sections