OnScroll Testimonial turns customer proof into a moment visitors have to move through instead of past. The section pins to the viewport and a fanned deck of portrait cards rises from below, one at a time, in rhythm with the scroll. Each card lifts, scales into focus with the photo, name, role and quote, then relaxes into a clean tilted row as the next takes over. Scroll speed drives the sequence, so the pacing always feels tied to the visitor's own hand. Nothing is hardcoded, shape every part of it from Framer's property panel, no code needed.
Features
Pinned scroll section with cards that rise and focus one at a time
Three modes: On Scroll, Autoplay or Hover
Adjustable pin length, 1.2x to 8x viewport height
Autoplay interval 0.5s to 10s with optional hover to pause
Unlimited testimonials: photo, name, role, quote
Card width, height, corner radius, border colour and width
Overlap and tilt controls to shape the deck
Separate active and resting scale, resting opacity, frosted wash
Rise distance for how far cards travel on scroll
Oversized background heading, outline or filled
Optional grid pattern, corner rings, background colour or image
Caption toggles, independent name, role and quote sizes and colours
Framer Font control so typography inherits your site styles
CTA pill button with custom label, colours, size and link
Staggered entrance animation with stagger, duration, play once
Respects reduced motion preferences and disables autoplay
Renders its final state on canvas, never a blank frame
Any layout width and height, fully responsive
Built-in demo sections to preview the pinned scroll before you wire it up
React and Framer Motion only, no external dependencies
Best for: agency sites, SaaS landing pages, portfolios, creator brands, coaching and consulting pages, service businesses, product pages, case studies and about sections, anywhere social proof deserves more than a static three column grid.
