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.