--- title: Building an Animated Testimonial Hero Using the GSAP... description: A detailed walkthrough of building an animated testimonial hero in Webflow using CMS-driven data, covering three techniques: a custom JavaScript slot-machine... canonical: https://daily.dev/posts/building-an-animated-testimonial-hero-using-the-gsap-timeline-and-dynamic-cms-data-dybrfbf59 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Building an Animated Testimonial Hero Using the GSAP Timeline and Dynamic CMS Data | daily.dev og:description: A detailed walkthrough of building an animated testimonial hero in Webflow using CMS-driven data, covering three techniques: a custom JavaScript slot-machine... og:url: https://daily.dev/posts/building-an-animated-testimonial-hero-using-the-gsap-timeline-and-dynamic-cms-data-dybrfbf59 og:image: https://api.daily.dev/og/posts/dybrFBF59.png og:image:alt: Building an Animated Testimonial Hero Using the GSAP Timeline and Dynamic CMS Data og:image:width: 1200 og:image:height: 630 og:locale: 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: ## Questions this post answers ### How can I create individually positioned items inside a Webflow CMS Collection List without custom code? Style each position using Webflow's built-in child selectors instead of trying to reorder items. Webflow's Designer dropdown offers first-child, last-child, odd, and even selectors, which can each be given their own width and margin values (e.g. first-child at 5em, even items at 8em with a vertical shift) to create a manually arranged collage look from a repeating Collection List. _Developers piecing together Webflow CMS layout tricks often compare techniques like this on daily.dev._ ### How do you scale a Webflow layout proportionally using em units and container queries? Set the wrapper to container-type: inline-size and give it a font-size of 1cqw, which equals one percent of the wrapper's width. Because em units are relative to font-size, an item set to 10em then equals 10% of the container width, so changing the wrapper's font-size scales every em-based child proportionally in one step, useful for responsive collages. _For readers exploring CSS container query patterns, daily.dev surfaces similar scaling techniques._ ### How can I make a 3D rotateX card flip animation look deep instead of flat in GSAP? Add perspective, since a plain rotateX transform tilts a card without any real sense of depth. Setting a perspective value of 1000 alongside rotateX from -90 to 0 degrees, combined with scale, Y position, and opacity tweens and an elastic ease-out, produces a convincing 3D flip with a bounce. Webflow's GSAP timeline UI lets perspective and origin be set directly on the action step. _Anyone tuning GSAP 3D transforms for that extra depth can track similar animation techniques 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 - [Recreating Apple’s Vision Pro Animation in CSS](https://daily.dev/posts/recreating-apple-s-vision-pro-animation-in-css-de7qk8yoq) · CSS-Tricks · 10 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) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"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","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/building-an-animated-testimonial-hero-using-the-gsap-timeline-and-dynamic-cms-data-dybrfbf59"},"datePublished":"2026-08-18T13:42:38.574Z","dateModified":"2026-09-14T06:54:48.022Z","description":"A detailed walkthrough of building an animated testimonial hero in Webflow using CMS-driven data, covering three techniques: a custom JavaScript slot-machine...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/37a74848f065daf105240f19e4f3c040?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/37a74848f065daf105240f19e4f3c040?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Codrops","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Codrops","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/codrops","url":"https://daily.dev/sources/codrops"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/building-an-animated-testimonial-hero-using-the-gsap-timeline-and-dynamic-cms-data-dybrfbf59","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"css,nocode,cms,web-animation","timeRequired":"PT14M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Codrops","item":"https://daily.dev/sources/codrops"},{"@type":"ListItem","position":3,"name":"Building an Animated Testimonial Hero Using the GSAP Timeline and Dynamic CMS Data"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/building-an-animated-testimonial-hero-using-the-gsap-timeline-and-dynamic-cms-data-dybrfbf59","comment":[{"@type":"Comment","text":"Does the two-list swap preserve a coherent keyboard focus order during transitions?","datePublished":"2026-08-18T21:57:46.385Z","url":"https://daily.dev/posts/dybrFBF59#c-fi5WXU85p","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/building-an-animated-testimonial-hero-using-the-gsap-timeline-and-dynamic-cms-data-dybrfbf59#faq","mainEntity":[{"@type":"Question","name":"How can I create individually positioned items inside a Webflow CMS Collection List without custom code?","acceptedAnswer":{"@type":"Answer","text":"Style each position using Webflow's built-in child selectors instead of trying to reorder items. Webflow's Designer dropdown offers first-child, last-child, odd, and even selectors, which can each be given their own width and margin values (e.g. first-child at 5em, even items at 8em with a vertical shift) to create a manually arranged collage look from a repeating Collection List. Developers piecing together Webflow CMS layout tricks often compare techniques like this on daily.dev."}},{"@type":"Question","name":"How do you scale a Webflow layout proportionally using em units and container queries?","acceptedAnswer":{"@type":"Answer","text":"Set the wrapper to container-type: inline-size and give it a font-size of 1cqw, which equals one percent of the wrapper's width. Because em units are relative to font-size, an item set to 10em then equals 10% of the container width, so changing the wrapper's font-size scales every em-based child proportionally in one step, useful for responsive collages. For readers exploring CSS container query patterns, daily.dev surfaces similar scaling techniques."}},{"@type":"Question","name":"How can I make a 3D rotateX card flip animation look deep instead of flat in GSAP?","acceptedAnswer":{"@type":"Answer","text":"Add perspective, since a plain rotateX transform tilts a card without any real sense of depth. Setting a perspective value of 1000 alongside rotateX from -90 to 0 degrees, combined with scale, Y position, and opacity tweens and an elastic ease-out, produces a convincing 3D flip with a bounce. Webflow's GSAP timeline UI lets perspective and origin be set directly on the action step. Anyone tuning GSAP 3D transforms for that extra depth can track similar animation techniques on daily.dev."}}]} ```