The Motion screen of Styles sets how your theme moves: the transition between pages, and the speed and curve of every change a visitor sees when they point at a button or open a menu. Open it with the paintbrush icon, Styles, in the icon rail, then click Motion. Each name on the screen is a row; click one to open its settings in a panel next to it.
Page transition
One page transition applies to the whole theme. It plays when a visitor goes from one page of your site to another. Click the row under Page transition and pick one. Point at a name to play it in the small window at the top of the list.
Transition
What visitors see
None
Pages load instantly.
Fade
The next page fades in over the old one.
Veil
The next page is revealed by a sideways wipe. This is the default.
Blur
The next page comes into focus from a blur.
Slide up
The next page slides up while the previous one lifts away.
Its speed is fixed; the durations and easings below do not change it. Visitors who turned on reduced motion on their device see no transition. Browsers that do not support page transitions load the next page without one.
Durations
Durations are the three speeds your theme's animations use. Blocks pick one by name, so a change here speeds up or slows down every animation that uses it.
Duration
Default
Used for
Quick
120 ms
Small state changes: hover, focus and toggles
Default
200 ms
Most transitions: menus, popovers and cards
Slow
320 ms
Larger moves you are meant to notice
Click a duration to change it, from 0 to 2000 ms. The slider reaches 1000 ms; type a larger value in the field. Click Play in the bar under it to watch a square cross the bar at that speed.
Easings
Easings are the three curves that set how an animation speeds up and slows down.
Easing
Use
Subtle
Barely visible. For hover, color and background changes.
Balanced
For things moving on screen: resizing and layout shifts. This is the default.
Expressive
Noticeable. For entering and leaving: menus, dialogs, drawers.
Click an easing to edit its curve. On the graph, time runs across and the animation's progress runs up. Drag the two points to bend the curve. A steep start makes the animation start fast, and a steep end makes it end fast. Click Play in the bar under the graph to watch the curve.
How blocks use durations and easings
A block's Transition setting, in its Appearance settings, picks the duration and easing for its changes, such as its hover look. It starts at Default and Balanced. A block can also use None, or Custom for a duration and curve of its own set right there. Reset motion does not change those. See Change how every button looks.
Reset motion
The screen's menu, the three dots next to Motion, has Reset motion. It puts the page transition, the durations and the easings back to their defaults.
Fantasma saves your changes as you make them. Your Ghost site shows them after you publish your theme.
The Motion screen of Styles sets how your theme moves: the transition between pages, and the speed and curve of every change a visitor sees when they point at a button or open a menu. Open it with the paintbrush icon, Styles, in the icon rail, then click Motion. Each name on the screen is a row; click one to open its settings in a panel next to it.
Page transition
One page transition applies to the whole theme. It plays when a visitor goes from one page of your site to another. Click the row under Page transition and pick one. Point at a name to play it in the small window at the top of the list.
Its speed is fixed; the durations and easings below do not change it. Visitors who turned on reduced motion on their device see no transition. Browsers that do not support page transitions load the next page without one.
Durations
Durations are the three speeds your theme's animations use. Blocks pick one by name, so a change here speeds up or slows down every animation that uses it.
Click a duration to change it, from 0 to 2000 ms. The slider reaches 1000 ms; type a larger value in the field. Click Play in the bar under it to watch a square cross the bar at that speed.
Easings
Easings are the three curves that set how an animation speeds up and slows down.
Click an easing to edit its curve. On the graph, time runs across and the animation's progress runs up. Drag the two points to bend the curve. A steep start makes the animation start fast, and a steep end makes it end fast. Click Play in the bar under the graph to watch the curve.
How blocks use durations and easings
A block's Transition setting, in its Appearance settings, picks the duration and easing for its changes, such as its hover look. It starts at Default and Balanced. A block can also use None, or Custom for a duration and curve of its own set right there. Reset motion does not change those. See Change how every button looks.
Reset motion
The screen's menu, the three dots next to Motion, has Reset motion. It puts the page transition, the durations and the easings back to their defaults.
Fantasma saves your changes as you make them. Your Ghost site shows them after you publish your theme.