About Scroll Reveal
A scroll-linked text and media reveal component that animates words one by one as the user scrolls. Six text animation styles and six media reveal styles with full scroll timing control. Inline images and videos blend seamlessly with animated text for scroll-driven storytelling.
Six Text Reveal Styles
Color Shift — gradual color transition from start to end color.
Fade — opacity fade from 15% to 100%.
Slide Up — vertical slide with opacity.
Blur — blur from 8px to 0 with fade.
Scale — scale from 0.6 to 1.0 with opacity.
Color and Blur — combined color shift and blur together.
Six Media Reveal Styles
Expand — width expansion with scale.
Fade — simple opacity fade.
Scale — scale from 0 to full size.
Slide Up — vertical slide with opacity.
Blur — blur from 12px to 0.
Flip — 3D rotation on X-axis from -90° to 0°.
Key Features
Words animate individually based on scroll position
Inline images and videos embedded between text segments
Three segment types — text, image and video
Configurable scroll start and end offset for precise timing
Pauses animation when component is out of viewport
Full font controls with alignment, line height and letter spacing overrides
Media size — auto (1em × 1em) or custom width and height in em units
Flexible width · auto height adapts to content
Property Controls
Content — segments array · text, image or video per segment
Colors
Typography
Animation — text reveal style · media reveal style
Media — border radius · size mode · custom width and height
Scroll — start offset (0–1) · end offset (0–1)
Use Cases Hero sections · Portfolio storytelling · Editorial layouts · Product showcases · Scroll-driven narratives · Fashion and brand pages · Agency homepages · Creative landing pages
SEO Keywords framer scroll reveal · framer text animation · framer word reveal · framer scroll text · framer typography component · framer scroll animation · framer animated text · framer text reveal · framer scroll component · framer code component
