Seventh > Sections > Animated heading

Animated heading

The Animated heading section creates a large, animated text display with optional reveal effects on scroll. It’s designed for hero moments, brand statements, or bold typography‑driven layouts.

What it does

This section displays:

• Large animated text
• Optional reveal-on-scroll behavior
• Optional background image or video
• Optional full‑height layout

Section settings explained

Animation

Reveal Text When Scrolling

• When enabled: Text reveals gradually as you scroll.
• When disabled: Text displays immediately.
• Creates a dramatic reveal effect.

Revealing Mode

• Only appears when Reveal Text When Scrolling is enabled.
• Natural: Text reveals as the section enters the viewport.
• Fixed: Text reveals based on scroll position (default).
• Controls how the reveal animation triggers.

Typography

Text Size

• Controls the size of the animated heading text.
• Heading 1: Largest text size.
• Heading 2: Very large text.
• Heading 3: Large text (default).
• Heading 4: Medium-large text.
• Heading 5: Medium text.
• Heading 6: Smaller text.

Line Height

• Controls spacing between lines of text.
• Default: Standard line spacing.
• Smallest: Tight line spacing.
• Smaller: Reduced line spacing.
• Larger: Increased line spacing.
• Largest: Maximum line spacing (default).

Animated heading block

Text Alignment

• Aligns the animated text.

Content Width

• Controls the width of the text area.

Reveal Text Colors

• Sets initial and final colors (or gradient) for the reveal.

Available blocks

The Animated Heading block can include:

• Simple Text
• Simple Image
• Simple Countdown
• Text
• Heading
• Button
• Icon

Common use cases

• Use this section to highlight key content or actions.
• Pair with a short heading and clear supporting text.

Tips for success

• This section is always full width. The section width cannot be changed.
• If the inner content is taller than the viewport, it will be cut out (go out of view).
• Keep copy short and focused on one goal.
• Use consistent imagery and spacing.