Effects, transitions and pointers

Effects, page transitions, pointers and the loading screen add motion to your site. Each one is set site-wide from the left rail. The Effects, Page transitions and Loading screen windows include a live preview.

Effects#

Click Effects in the left rail. The window has three tabs, one per effect slot. You can use one effect in each slot and combine all three.

1. Pick a tab, then click an effect.
2. Adjust its settings, such as intensity or smoothing. Settings differ by effect.
3. To go back to an effect's starting values, click Reset to defaults.

Overlay effects sit over the whole page. Scroll effects react as visitors scroll. Pointer effects follow the visitor's pointer. Some pointer effects have a Layer style section, and some can be set to Draw behind content.

In Layer style, the Flow look's Replace fill swaps a surface for the marks under the pointer. Nothing under that surface is treated, so a background's own look never shows through its gaps.

Keep pointer effects off a section#

1. Hover the section and click Section settings.
2. Under Site effects, turn off Include this section.

Pointer effects then won't react over that section.

Keep text clear of pointer effects#

Pointer effects can be kept out of a box behind each line of your text, so it reads against the plain page. The text itself is never treated: the Text layer's look draws in the box instead, and with the Text layer set to None the box stays plain.

1. In Pointer FX, open Layer style, turn on Per layer and choose the Text layer.
2. Turn on Knockout.

Knockout needs a Text look different from the rest of the page, so it's only offered with Per layer on. Turning Per layer off turns it off too. It also needs a look that draws on its own (Color, Grade, Flow, Halftone, ASCII, or None for plain boxes): Pixelate and Warp only rearrange what's already there, so with them the text itself is treated and Knockout isn't offered.

Every text follows this setting, including your header's. Links listed one under another in the header share one box. To change one text, select it and click the lightning icon in its toolbar:

• Site setting: follows Knockout.
• Over text: effects draw over the text.
• Under text: the text stays on top, untouched by effects.
• Knockout: a knockout whatever the site sets.

Knockout doesn't clear pointer effects set to Draw behind content.

Page transitions#

Click Page transitions in the left rail to set how your site animates when a visitor goes from one page to another. A transition has two parts, and you can combine any of them:

• Wipe: how the old page gives way to the new one. Choose Dissolve, Cube Flip, Horizontal Bars, Random Squares, Stair Wave, Radiating Noise, Triangles, Corner Wipe, Corner Columns or Curtain.
• Camera: how the view moves while the wipe plays. Choose None to keep it still, or a move: Settle (a gentle zoom that eases in and out), Tilt and Roll, Push In, Pull Back, Pan Left, Pan Right, Crane Up, Crane Down, Orbit, Barrel Roll or Whip Pan. The camera leaves the old page and arrives on the new one in a single motion.

Each option shows a short description when selected. New sites use Dissolve with no camera movement.

Motion#

Click Motion in the left rail to choose how every section arrives as visitors scroll to it. Motion has four parts, and you can combine any of them:

• Section: how the section itself arrives. Choose Still to keep it in place, or Fade, Rise, Grow or Rise + grow.
• Headings: With section, or on their own: Letters (letter by letter), Letters up (each letter rising into place), Lines (each line rolling up from behind its own edge) or Lines ripple (each line rolling up, its letters a beat apart).
• Other text: paragraphs, labels and buttons. With section, Lines or Lines ripple.
• Images: With section, or on their own: Progressive (sharpening from coarse blocks, like an image loading on an old connection), Wipe up (from the bottom, behind a hard edge), Blinds or Squares.

What arrives on its own does so in reading order across the whole section, one heading, paragraph or image after another, each starting as soon as it scrolls into view. When headings or other text arrive on their own, so do the section's icons, buttons, tags, form fields and dividers, each in its place in that order: icons, buttons, tags and fields rise into place, and dividers draw in from their start. The preview shows your site as visitors see it: scroll it to watch each section arrive, or click Play again to start from the top. New sites have no motion.

To keep one section still, turn off Animate this section in its Section settings. Visitors who've asked their device to reduce motion see sections fade in instead, with their text and images.

Pointers#

Click Pointers in the left rail to choose the cursor visitors see:

• Default keeps the visitor's normal cursor.
• Ring shows a circle that follows the pointer. Set its Color, Size and Border. Switch between Regular and Hover to style how it looks normally and when it's over something clickable.

Loading screen#

Click Loading screen in the left rail to style what visitors see while your site loads.

• Loader: choose Shapes (Spinner, Dots or Orbit), Counter or Bar, then set its colors and Background.
• Reveal: choose how the loading screen clears to show your site. Pick a Wipe and a Camera, the same choices as page transitions. The camera only moves onto your site, since there's no page before it.