Scroll Reveal Content A
Open in

01

Join The Community

Join over a billion people around the world who come to games to create, connect and be entertained.

02

Bask in the spotlight

This is where customer attention locks in — with your brand directly in the action of the biggest IP games.

03

Drive big results

Reach massive, high-intent audiences — and turn attention into awareness, engagement, and sales.

Features

  • Scroll-based content reveal animation
  • Three content sections with synchronized image transitions
  • Sticky positioning for smooth parallax-like effect
  • Built with Framer Motion for smooth scroll tracking
  • Progressive reveal with numbered sections
  • Responsive layout with mobile and desktop variations
  • Customizable title and description styling
  • Opacity-based transitions for visual hierarchy
  • Fully typed with TypeScript

Component Props

ScrollRevealContentA

  • contentA - ItemContent (required) - First section content
  • contentB - ItemContent (required) - Second section content
  • contentC - ItemContent (required) - Third section content
  • titleClass - string - Custom CSS classes for titles
  • descriptionClass - string - Custom CSS classes for descriptions
  • className - string

ItemContent (Type)

  • title - string - Section title
  • description - string - Section description
  • image - object - Image configuration:
    • url - string - Image URL
    • width - number - Image width
    • height - number - Image height
    • alt - string - Alt text

Usage Notes

This component creates a scroll-driven content reveal effect with three sections. As users scroll, content items fade in progressively with a vertical progress bar indicator.

The component requires a substantial height (300vh) to create the scroll effect. Images transition at scroll thresholds of 0.33 and 0.66, creating a synchronized reveal.

On desktop (lg breakpoint and above), images display on the right side. On mobile, only the text content is shown for better readability.