About 22 - Animated Story with Images

About Us

We are a passionate team dedicated to creating innovative solutions that empower businesses to thrive in the digital age. With years of experience in design and development, we craft beautiful, accessible components that help teams build faster.

Component Data

• ID: about22
• Access: pro
• Created: Oct 27, 2025
• Updated: Aug 23, 2026
• Type: block

About 22 block design & features

About22 is an animated two-column about section using Framer Motion. The left column contains a vertical image that animates into view. The right column has a large title that animates first, followed by two paragraphs of description text side by side, and a horizontal aspect-ratio image at the bottom. All elements use scroll-triggered fade and slide animations.

Each element uses whileInView animation triggers with staggered delays. The animations slide up from below while fading in. The viewport once option ensures animations only play once. The vertical image uses a taller aspect ratio while the horizontal image uses a 3:2 ratio. Both have rounded corners.

This block adds motion and polish through animation. The staggered reveals create a sense of progression as users scroll. The Framer Motion dependency enables smooth, performant animations. Simple layout elevated by the animation treatment. Requires two images with different aspect ratios.

On mobile, the columns stack with the vertical image appearing below the text content due to flex order reversal. Animations still trigger on scroll into view.