## Motion: reveal, smooth scroll and page changes Product: Grafton - Blog & Magazine WordPress Theme URL: https://hub.jkdevstudio.com/docs/grafton/styles-and-settings/motion Updated: 2026-11-14 Summary: Every setting on the Grafton Pro Motion page: reveal on scroll for text, pictures and cards, smooth scrolling, the Reveal panel on each block, and page changes. This is a Pro feature. Grafton Pro adds three kinds of motion: content that makes an entrance as it scrolls into view, a scroll that glides to a stop, and pages that change without a reload. The first two are set at [[Grafton Pro > Theme Options > Motion]], the third on the SPA page of Theme Options. ## Reveal on scroll Text rises line by line, pictures open from the bottom, and buttons, cards and forms fade in, each as it reaches the screen. A long paragraph comes in as one block, so a post never animates sentence by sentence.
The Reveal group on the Motion page, with the Reveal on scroll switch ringed and the Text, Pictures, Buttons and Picture speed settings below
One switch for all entrances, then one setting per kind.
:::options - **Reveal on scroll** (default: on): Turns every entrance on or off. The settings below it apply while it is on. - **Text** (default: Lines): How headings, paragraphs and list items enter. **Lines** lifts the words of each line in turn, **Fade** brings the block up softly, **None** shows it at once. - **Pictures** (default: Unveil): **Unveil** opens a picture from the bottom while it settles into place, **Fade** brings it up softly. - **Buttons, cards and forms** (default: Fade): How buttons, cards, forms and social links enter, each as one piece. - **Picture speed** (default: 1100 ms): How long one picture takes to unveil, from 600 to 2000 ms. Higher is slower. ::: ### Change the entrance of one block Select any block in the editor and open the **Reveal** panel in its sidebar. **Entrance** overrides the site setting for that block only: **Text rises line by line**, **Fades in as one piece**, **Pictures unveil** or **No entrance**. **As the site sets** returns it to the setting above. ## Smooth scrolling The page glides to a stop after each turn of the wheel instead of jumping. Phones and tablets keep their native scroll unless you switch smoothing on for touch. :::options - **Smooth scrolling** (default: on): The glide itself. Every setting below it shows while it is on. - **Motion** (default: Follow the wheel): **Follow the wheel** catches up softly with each turn; **Fixed duration** moves over a set time with the **Duration** and **Easing** you choose. - **Smoothness** (default: 5): From 1 to 10. Higher makes a longer, heavier glide. - **Respect reduced motion** (default: on): Visitors who ask their device for less motion get a plain scroll. - **Smooth the wheel** (default: on): With **Wheel speed** for how far one turn moves the page. - **Smooth on touch** (default: off): Smooths scrolling on phones and tablets, with its own smoothness, speed and swipe momentum. - **Glide to sections** (default: on): Links to a part of the page glide there. **Space above the section** (default 100px) leaves room for the sticky header. - **Stop on link click** (default: on): A glide still running stops when a link is followed. ::: ## Page changes without a reload With the SPA integration on, a click on a link swaps the content of the page instead of loading a new one: the header, footer and scroll position behave as in an app. Grafton sets an 800 ms change with a gentle ease. The settings and the rules for what loads as a full page are on [[Grafton Pro > Theme Options > SPA]]. ## Visitors who ask for less motion Entrances do not run at all for them: the page shows complete at once. Smooth scrolling falls back to the native scroll while **Respect reduced motion** is on.