Animated Heading, Parallax Text and Particle Image widget settings

Three widgets in the Effects group of the Add panel move text or a photo as the page loads or scrolls. Animated Heading types a heading out or fills it with flowing color. Parallax Text shows 2 to 6 big words that drift at different speeds as visitors scroll. Particle Image breaks a photo into particles on scroll, or builds it from them.

Every one of them ends its Design panel with Spacing and Animations & Effects. Those work the same on every widget, so they're explained once in Widget design panel basics and Animations and effects.

Animated Heading

A real heading (Heading 1 to 6, or a paragraph) that can type itself out letter by letter, cycle through several lines, and fill its letters with a gradient that flows.

How to add it

1. Click Add, open Effects, and drag Animated Heading onto the page.
2. Click Edit Text on the toolbar.
3. Type your lines and pick the Heading type, then click Save.
4. Click Edit Design to set speed, colors and text style.

Edit Text

• Texts to type out — one per line (called Text when Typewriter is off): each line is one text. The first line is what search engines and screen readers read, so put your main heading there. With Typewriter off, only the first line shows.
• Heading type: Heading 1 (page title), Heading 2 to Heading 6, or Paragraph. Default Heading 1. It warns "Use one Heading 1 per page."
• Typewriter — type the text out letter by letter: on by default.
• Loop through all texts (otherwise stop on the last): shows when Typewriter is on and you have 2 or more lines. On by default.
• Gradient text — colors set in the Design panel: off by default.

Save stays grayed out until there's at least one line.

Typewriter

• Type the text out: the same switch as in Edit Text.
• Typing speed (per letter): 20 to 300 ms. Default 70 ms. Lower is faster.
• Pause before the next text: 0.5 to 10 seconds. Default 2. How long a finished line stays before it's erased.
• Loop through all texts: start again after the last line. Off means it stops on the last line.
• Blinking cursor: the flashing bar after the letters. On by default.
• Cursor color: shows when the cursor is on.

Gradient Text

• Fill letters with a gradient: off by default.
• Color 1, Color 2, Color 3: the gradient's colors. You need at least 2 and can have up to 5. Use + Add color and Remove.
• Direction: → ← ↓ ↑. Default →.
• Animate — colors flow through the text: on by default when the gradient is on.
• Flow speed (one pass): 1 to 30 seconds. Default 8.

Text Style

• The usual text controls (Font, Size up to 160 px, Text color, Format, Alignment, Text shadow). See Widget design panel basics. Default size is 50 px on desktop, 42 on tablet and 34 on phones, bold, left aligned.
• Letter spacing: −10 to 30 px. Default 0.
• All capitals: off by default.

Examples

• A roofer's hero: "We fix roofs", "We replace roofs", "We inspect roofs", typed out on a loop.
• A launch page: one line with a flowing three-color gradient and Typewriter off.

Parallax Text

A row of 2 to 6 big words. As the page scrolls, each word moves at its own speed: the first is the slowest and the last the fastest. All the words are one real heading or paragraph on the page.

How to add it

1. Drag Parallax Text from Effects onto the page.
2. Click Edit Words. Type each word in Word 1 (slowest) to the last word (fastest). Use + Add word and Remove.
3. Pick the Text type (heading level or paragraph). Default Heading 2.
4. Click Save. It stays grayed out until at least 2 words are filled in.

Motion

• Style: Spread apart (words start level and drift apart as you scroll) or Line up (words start on a diagonal and settle into a line by the middle of the screen). Default Spread apart.
• Direction: Down or Up. Default Down.
• Strength: 0.2× to 3×. Default 1×. How far the words travel.
• Fade in when first seen: on by default.
• Let words move outside the widget: off by default, so the words stay inside the widget's box.

Layout

• Height: 120 to 1200 px, per screen size. Default 600 desktop, 480 tablet, 420 phone.
• Gap between words: up to 300 px, per screen size. Default 120, 80 and 24.
• Words per row on phones: 1, 2 or 3. Default 2. On phones the words wrap onto rows.
• Background: a color behind the widget. None by default.

Word Text Style

• The usual text controls, with Size up to 200 px. Default 70 px desktop, 55 tablet, 36 phone, bold, dark gray.
• All capitals: off by default.

Examples

• A design studio: CREATE, DREAM, DESIGN, BUILD (the default words) as a section break.
• A gym: TRAIN, SWEAT, REPEAT with Line up, so the words settle into a line as visitors reach them.

Particle Image

A photo that breaks into particles as the page scrolls. With Reverse on, the particles fly in and come together into the photo instead. The photo itself is a normal image on the page, so search engines and screen readers still get it.

How to add it

1. Drag Particle Image from Effects onto the page.
2. Click Choose Image, pick a photo, and add Alt text ("Describe the image"). Save stays grayed out until you pick a photo.
3. Click Edit Design and choose an Effect. Scroll the editor canvas to preview it.

Effect

• Effect: Warp speed, Explode, Gravity fall, Pixel disintegration, Dust scatter, Slice drift, Ripple dissolve, Spiral vortex, Shatter glass, Smoke, Glitch, Wind, Sparkle vanish or Melt down. Default Warp speed.
• Reverse — particles come together into the photo: off by default.

Particles

• Number of particles: 200 to 5000, in steps of 100. Default 1500.
• Particle size: 1 to 12 px. Default 4. More particles need a smaller size to cover the photo.
• Stagger: 0 to 50%. Default 10%. How unevenly the particles start moving.

Scroll Timing

• Start when the top reaches: 0 to 100% down the screen. Default 50%. The effect starts when the widget's top reaches this point.
• Scroll distance (more = slower): 200 to 4000 px. Default 800. How far visitors scroll for the whole effect to play.

Image

This section starts closed.

• Height: 120 to 1200 px, per screen size. Default 500 desktop, 420 tablet, 320 phone.
• Image fit: Fill (may crop) or Fit (whole image). Default Fill.
• Corners: 0 to 48 px. Default 0.
• Background: shows around the photo when it's set to Fit.

Pause motion

A page with a Particle Image automatically gets the Pause motion button, so a visitor can stop the motion. It's remembered for that visitor. Choose where it sits in Theme → Motion (Automatic, Bottom left or Bottom right). See Site theme.

Examples

• A demolition company: a building photo with Explode as visitors scroll past.
• A product reveal: Reverse with Sparkle vanish, so the product forms out of sparkles.

Limits and what it can't do

• Animated Heading: up to 5 gradient colors. Typing and the gradient flow only play in the browser; the page itself always holds the first line.
• Parallax Text: 2 to 6 words. One word per box, so a long phrase won't fit.
• Particle Image: one photo. No video.
• Visitors whose device asks for less motion see these widgets still: the first line of the heading, the words in place, and the plain photo.
• None of these three can be connected to a collection with Connect to Data.

Who can use it

Anyone with the Mount Olympus tool. Client people need Editor to add these widgets or change their design. Widget content lets them change the words and photo with Edit Text, Edit Words and Choose Image.

Troubleshooting

• The heading doesn't type: check Type the text out is on in Typewriter. If the device asks for less motion, the first line just shows.
• It types one line and stops: add more lines in Edit Text, or turn on Loop through all texts.
• Only one line shows: Typewriter is off. With it off, only the first line shows.
• The gradient doesn't show: turn on Fill letters with a gradient in Gradient Text. Turning on Gradient text in Edit Text does the same.
• "No words — use Edit Words to add some.": the widget has no words. Click Edit Words.
• Can't save in Edit Words: fill in at least 2 words.
• "Particle Image — use Choose Image to pick a photo.": no photo yet. Click Choose Image.
• The particle effect doesn't move in the editor: scroll the canvas. The effect is driven by scrolling.
• The particle effect is slow on phones: lower Number of particles and raise Particle size.
• The words or photo don't move for a visitor: they may have pressed Pause motion, or their device asks for less motion.