A detailed walkthrough of building an animated testimonial hero in Webflow using CMS-driven data, covering three techniques: a custom JavaScript slot-machine style counter, a manually arranged CMS Collection List collage using only Webflow's built-in child selectors and CSS container queries with em/cqw units for scaling, and a looping GSAP animation built entirely in Webflow's visual timeline. Includes code snippets for the counter easing logic, CSS positioning tricks, and GSAP settings for a 3D rotation swap effect between member portraits, plus notes on reduced-motion accessibility handling.
Table of contents
Tech stackPart 1: The counterPart 2: An individual Webflow CMS collage gridPart 3: A looping GSAP animation, built in Webflow’s timelineAccessibilitySee it liveCreditsQuestions this post answers
How can I create individually positioned items inside a Webflow CMS Collection List without custom code?
Use Webflow's built-in child selectors (first-child, last-child, odd, even) to style each repeated item differently instead of trying to reorder them. For example, setting distinct widths and margin-top values per selector (like first-child at 5em with a 10em top margin, even items at 8em) lets four CMS-driven portraits sit at unique sizes and positions, creating a manually arranged collage look from a repeating collection. daily.dev surfaces practical CMS layout workarounds like this for developers building dynamic Webflow interfaces.
How do I scale a whole CSS layout responsively using em units and container queries?
Set the wrapper's container-type to inline-size and its font-size to 1cqw (1% of the container width), then size every child element in em units. Since em is relative to font-size, a 10em item becomes exactly 10% of the container width, so changing the wrapper's font-size scales the entire layout proportionally, including nested elements, without touching individual item styles. developers scaling responsive layouts can track container query techniques like this on daily.dev.
How do I make a rotateX 3D flip animation in GSAP look like it has real depth instead of looking flat?
Add a perspective value, such as 1000, alongside the rotateX transform; without it a pure rotateX looks flat because the card just tilts with no depth cue. Webflow's GSAP action-step UI lets you set perspective and transform-origin directly without first configuring a 3D transform in the Designer, making it easy to pair with an elastic ease-out for a bounce effect. anyone polishing GSAP-driven 3D transitions can find implementation details like this on daily.dev.
1.3K Impressions1 Comment