Every content section has a Motion group of three settings at the end of its settings, above Custom CSS: Dark moment, Rise on scroll and Chapter title. Each one applies to the section it is set in. Select a section in the editor's sidebar to see the group.
In the Card rail section on the Checkmate home page, the group sets the chapter title "Brew at home".
How content inside the sections fades in as customers scroll is set once for the whole store, under Entrance animation in Animation settings.
The three settings work only in sections on the page itself, not in the header or the footer. The Features section in the footer, for example, has the group, but its settings do nothing there. The page sections, such as Collection and Product information, have no Motion group.
Dark moment
Turns the page dark while this section is in the middle of the screen. The sections on the screen, the page behind them and the header switch to the dark mode colors set in Color settings over less than half a second. They switch back when the section leaves the middle of the screen. Off by default.
If several sections in a row have Dark moment on, the page stays dark while they pass. Nothing changes for a customer who already sees the store in dark mode. For customers whose device is set to reduce motion, the page switches without the fade.
Rise on scroll
The section starts smaller and a little lower, and grows into place as it scrolls into view. On screens 1920 pixels wide and wider it starts at 90% of its size, and on narrower screens it starts closer to its full size. Off by default.
Customers whose device is set to reduce motion see the section at its full size, and so do customers whose browser does not support this effect. In the Featured collection section, Rise on scroll is hidden when Product layout is Spotlight.
Chapter title
Names a chapter for the chapter indicator, a label in the bottom left corner of the screen that tells customers which part of the page they are reading. Enter a short name, such as Our story. The indicator shows only when Chapter indicator is on in Animation settings. It is off by default.
A section with a chapter title starts a chapter. The sections after it belong to that chapter, up to the next section with a chapter title. Leave the field empty to keep the section in the chapter above it.
The indicator shows the chapter's number before its title, such as 02 Our story for the second chapter on the page. When the pointer is over it, or it has keyboard focus, it opens a list of all the chapters, and clicking one scrolls to it. A thin line in the accent gradient from Color settings runs along the top of the screen and fills as customers scroll down the page.
The indicator shows only:
On a page with at least two chapter titles.
On screens 1000 pixels wide and wider.
Once the first section of the page has scrolled above the middle of the screen. It hides again when the footer comes into view.
Motion settings of a section's own
Some sections add a setting of their own to the Motion group, such as Animate heading on load in the Hero section and Rail follows the page scroll in the Timeline section. Their own articles describe them.
The Hero, Section and Video sections also have Background parallax, which moves a background photo or video a little slower than the page as customers scroll. It is on by default. Section background settings describes it.
Every content section has a Motion group of three settings at the end of its settings, above Custom CSS: Dark moment, Rise on scroll and Chapter title. Each one applies to the section it is set in. Select a section in the editor's sidebar to see the group.
In the Card rail section on the Checkmate home page, the group sets the chapter title "Brew at home".
How content inside the sections fades in as customers scroll is set once for the whole store, under Entrance animation in Animation settings.
The three settings work only in sections on the page itself, not in the header or the footer. The Features section in the footer, for example, has the group, but its settings do nothing there. The page sections, such as Collection and Product information, have no Motion group.
Dark moment
Turns the page dark while this section is in the middle of the screen. The sections on the screen, the page behind them and the header switch to the dark mode colors set in Color settings over less than half a second. They switch back when the section leaves the middle of the screen. Off by default.
If several sections in a row have Dark moment on, the page stays dark while they pass. Nothing changes for a customer who already sees the store in dark mode. For customers whose device is set to reduce motion, the page switches without the fade.
Rise on scroll
The section starts smaller and a little lower, and grows into place as it scrolls into view. On screens 1920 pixels wide and wider it starts at 90% of its size, and on narrower screens it starts closer to its full size. Off by default.
Customers whose device is set to reduce motion see the section at its full size, and so do customers whose browser does not support this effect. In the Featured collection section, Rise on scroll is hidden when Product layout is Spotlight.
Chapter title
Names a chapter for the chapter indicator, a label in the bottom left corner of the screen that tells customers which part of the page they are reading. Enter a short name, such as
Our story. The indicator shows only when Chapter indicator is on in Animation settings. It is off by default.A section with a chapter title starts a chapter. The sections after it belong to that chapter, up to the next section with a chapter title. Leave the field empty to keep the section in the chapter above it.
The indicator shows the chapter's number before its title, such as 02 Our story for the second chapter on the page. When the pointer is over it, or it has keyboard focus, it opens a list of all the chapters, and clicking one scrolls to it. A thin line in the accent gradient from Color settings runs along the top of the screen and fills as customers scroll down the page.
The indicator shows only:
Motion settings of a section's own
Some sections add a setting of their own to the Motion group, such as Animate heading on load in the Hero section and Rail follows the page scroll in the Timeline section. Their own articles describe them.
The Hero, Section and Video sections also have Background parallax, which moves a background photo or video a little slower than the page as customers scroll. It is on by default. Section background settings describes it.
To give your home page chapters, see Divide your home page into chapters.