TextImage Reveal

Scroll-driven cinematic text-image

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

Scroll-driven cinematic text-image