---
title: "Building an Animated Testimonial Hero Using the GSAP Timeline and Dynamic CMS Data"
url: https://daily.dev/posts/building-an-animated-testimonial-hero-using-the-gsap-timeline-and-dynamic-cms-data-dybrfbf59
source_url: https://tympanus.net/codrops/2026/08/18/building-an-animated-testimonial-hero-using-the-gsap-timeline-and-dynamic-cms-data
type: article
source: "Codrops"
published: 2026-08-18T13:42:38.574Z
updated: 2026-08-18T13:46:49.440Z
tags: ["css", "nocode", "cms", "web-animation"]
reading_time: 14
upvotes: 0
comments: 1
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Building an Animated Testimonial Hero Using the GSAP Timeline and Dynamic CMS Data

**[Codrops](https://daily.dev/sources/codrops)** · 14 min read · 0 upvotes · 1 comments

## Summary

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.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://tympanus.net/codrops/2026/08/18/building-an-animated-testimonial-hero-using-the-gsap-timeline-and-dynamic-cms-data>

## Questions 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._

## Community discussion

Top comments from developers on daily.dev.

**@agustinbarrientos** · 0 upvotes

> Does the two-list swap preserve a coherent keyboard focus order during transitions?

## Similar posts on daily.dev

- [Building a Scroll-Driven 3D Cube Gallery in Webflow with GSAP](https://daily.dev/posts/building-a-scroll-driven-3d-cube-gallery-in-webflow-with-gsap-g3vwmeygr) · Codrops · 0 upvotes · 0 comments
- [Building an Infinite GSAP Scroll Gallery with Parallax and Flip Transitions](https://daily.dev/posts/building-an-infinite-gsap-scroll-gallery-with-parallax-and-flip-transitions-vwc4olh9r) · Codrops · 1 upvotes · 0 comments

---

Tags: [#css](https://daily.dev/tags/css), [#nocode](https://daily.dev/tags/nocode), [#cms](https://daily.dev/tags/cms), [#web-animation](https://daily.dev/tags/web-animation)

[View this post on daily.dev](https://daily.dev/posts/building-an-animated-testimonial-hero-using-the-gsap-timeline-and-dynamic-cms-data-dybrfbf59)