OnScroll Testimonial

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.