Scroll Marker Reveal — Scroll-based highlight text animation

Scroll Marker Reveal — Framer Highlight Text Animation

Scroll Marker Reveal is a GSAP + ScrollTrigger powered text reveal component for Framer. It animates colored marker bars that uncover each line of text as users scroll — creating a bold, modern motion typography effect.

Not a basic fade-in.A premium scroll-based headline animation.

Perfect For

• Hero headlines

• Landing pages

• SaaS marketing sites

• Agency & studio websites

• Portfolios & case studies

If you’re looking for a Framer scroll text animation or highlight reveal heading effect, this is it.

How It Works

When text enters the viewport:

• Each line is covered by a highlight bar

• Bars scale away

• Lines reveal with staggered timing

• Animation plays once for a clean, premium feel

Customisation Options

• Reveal direction (left, right, up, down)

• Stagger timing & order

• Scroll trigger position

• Animation duration

• Marker color & text color

• Semantic tag (H1–H4, P, Span)

• Text alignment (Left, Center, Right)

Built-in alignment ensures the animation works perfectly in centered or right-aligned layouts — no wrappers or hacks needed.

Why It’s Different

• Real line detection via SplitText

• Font-aware measurements

• No layout shift

• Hardware-accelerated GSAP transforms

• Runs only in Preview & Live

Production-ready. Clean. Reliable.

How To Use

1. Add component

2. Insert text

3. Choose tag & alignment

4. Set direction, stagger & color

5. Publish

No overrides. No setup.

If your headline matters, this makes it feel alive.