Text- Image Reveal is a scroll-based Framer Motion component that creates an immersive editorial layout by splitting each line of text into left and right segments while revealing an image between them. As the user scrolls, each line animates independently using scroll progress tracking, gradually expanding the image width from 0 to its full size. This produces a smooth “unfolding” effect that feels both organic and visually engaging.

The animation is carefully tuned to ensure performance and fluidity across devices. Each line reacts based on its position in the viewport, allowing multiple reveal moments as the user moves through the section.

Key Features

• Scroll-driven reveal animation per text line

• Dynamic image expansion between split text

• Spring-smoothed motion for natural transitions

• Fully customizable typography (size, spacing, tracking)

• Adjustable image dimensions and corner radius

• Multi-slide support for storytelling sequences

• Clean, minimal layout structure for easy integration

• Performance-optimized transforms using GPU acceleration hints

• Responsive Behavior.

Customization

• Edit slides directly to define text and images per line

• Adjust imageWidth and imageHeight to control reveal scale

• Modify lineFontSize and letterSpacing for typographic style

• Control spacing between lines using lineSpacing and lineGap

• Change backgroundColor, textColor, and hintColor for theme matching

• Fine-tune animation feel via spring configuration (stiffness, damping)

Best Used For

• Creative agency landing pages

• Portfolio storytelling sections

• Editorial or magazine-style websites

• Brand narrative introductions

• Product or campaign story reveals

• High-end interactive web experiences