# Motion (animate the page)

> Turn a static page into a high-end, alive experience — scroll parallax, rich reveal cascades, magnetic and 3D-tilt hover, animated text, count-up stats.

Source: https://knowledge.estage.com/capabilities/motion/
Part of the ESTAGE knowledge base (https://knowledge.estage.com). Full corpus: https://knowledge.estage.com/llms-full.txt

---
Motion turns a flat, static page into a **high-end, alive experience** —
Awwwards-grade animation. Not plain fade-ins: scroll parallax, rich reveal cascades, magnetic
and 3D-tilt hover, animated headlines, count-up stats, smooth inertia scroll. Genesis **layers
motion on top** of your existing page — your content, copy, layout, theme, and colors stay
exactly as they are.

## How to trigger it

Just describe it — no special syntax needed. Ask for everything, or name exactly what to
animate (or avoid):

- *"animate the page"* — animate the whole page to its fullest tasteful potential
- *"make the hero cinematic and cascade the feature cards on scroll"*
- *"add subtle motion only — parallax background and soft hover, no typewriter"*
- *"animate the pricing section but don't touch the contact form"*

The agent understands the request from plain words, in English or Russian.

## What it adds

Genesis varies the technique per section so it never feels repetitive:

- **Hero** — a cinematic entrance: headline springs/blurs in word-by-word over a parallax
  backdrop, with floating accents.
- **Scroll parallax** — backgrounds and decorative layers drift at a different speed than the
  foreground, for real depth.
- **Reveal cascades** — cards, list items, and gallery tiles stagger in as you scroll (clip
  wipes, blur-to-sharp, scale+rotate — varied per section).
- **Animated text** — a typewriter or per-letter reveal on a key headline.
- **Count-up stats** — numbers tick up from zero when they scroll into view.
- **Hover micro-interactions** — magnetic buttons, 3D-tilt cards, image zoom, glowing
  underlines.
- **Pinned scroll scenes** — a sticky section that scrubs through states as you scroll, where
  it fits.
- **Smooth scroll** — buttery inertia scrolling across the whole site.

Under the hood it uses framer-motion (built in) and, when an effect needs it, premium
libraries (smooth-scroll, GSAP scroll scenes, text-splitting) — added automatically.

## What it never touches

- Your **text, copy, sections, theme, and colors** — it's layering motion, not redesigning.
- Your site's **functional modules** (forms, order forms, integrations) keep working.
- The **visual editor** keeps working — element targeting is preserved.

## Built-in polish

- **No flicker.** Reveals fire **once** and stay (the #1 failure of naive scroll animation is
  re-triggering on every scroll — Genesis avoids it by design) and animations run on the GPU,
  so text and borders don't shimmer.
- **Accessibility.** Visitors with *reduce motion* turned on get an instant, static page —
  non-essential motion is skipped automatically.
- **Performance.** Tasteful timing and staggering instead of firing dozens of heavy animations
  at once.

:::tip
Be directional if you have taste in mind: *"cinematic and bold"* vs *"subtle and
professional"*, or name the sections to animate and the ones to leave alone. A plain
*"animate the page"* goes for maximum effect.
:::

:::note
Motion is page-scoped — it animates the page you're on (say "the whole site" to extend smooth
scroll and reveals across pages). After it runs, [refresh the preview](/visual-editor/) if an
effect doesn't appear immediately.
:::