Motion: reveal, smooth scroll and page changes - Grafton
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 ProTheme OptionsMotion, 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.
Turns every entrance on or off. The settings below it apply while it is on.
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.
Unveil opens a picture from the bottom while it settles into place, Fade brings it up softly.
How buttons, cards, forms and social links enter, each as one piece.
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.
The glide itself. Every setting below it shows while it is on.
Follow the wheel catches up softly with each turn; Fixed duration moves over a set time with the Duration and Easing you choose.
From 1 to 10. Higher makes a longer, heavier glide.
Visitors who ask their device for less motion get a plain scroll.
With Wheel speed for how far one turn moves the page.
Smooths scrolling on phones and tablets, with its own smoothness, speed and swipe momentum.
Links to a part of the page glide there. Space above the section (default 100px) leaves room for the sticky header.
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 ProTheme OptionsSPA.
#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.
Last updated
Was this article helpful?
On this page
